Menu
I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
479
asked Oct 18 '25 04:10
Would you see the screen like below picture?
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
I think It's because you didn't declare 'height'.
Add 'height:100vh'style.
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
The reason for setting to 100vh is because the target is body tag.
If it's a different tag, use a different value.
Then this will be
And add 'margin:0px' style to remove the scroll.
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Then you can see
Thanks!
143
answered Oct 21 '25 08:10
You can use cover
background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
http://jsfiddle.net/ou10gmfd/
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
