Hey there,
No matter what I try to do I can’t get the background image to cover the top of the page, there’s always whitespace. Is it because it’s attached to the header element or something?
New user so I can only upload one pic. CSS code is just:
header {
background-image: url(url to the pattern);
background-size: cover;
height: 300px;
}
Hi @bit2840148825
welcome to the forum!
Just the styles for the header is too little to tell for sure. Try the following:
Add a solid red border to the header styles and check if the border is at the top of the page or wrapped around the image. So you can see where your header element actually starts.
If the border (as I would expect) leaves the same white space to the top end of the browser window, try the following:
Check the parent element of header. Is it the <body> tag? Some browsers add a padding per default. Add:
* {
margin: 0;
padding: 0;
}
The ‘*’ stands for all elements. It resets the default paddings and margins of the browsers.
It worked perfectly! Thank you!