Menu
I have a background image of size 1620*1080, and my screen resolution is 1366*768. How is possible that it doesn't cover about 15% of my screen (the right part)?
Here's my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
min-height: 100%;
min-width: 100%;
background-image:url(background.png);
background-repeat: no-repeat;
}
div#container {
margin: 0 auto;
background-color: red;
}
</style>
</head>
<div id="container">
</div>
<body>
</body>
</html>
As you can see I've added
min-height: 100%;
min-width: 100%;
thought maybe it would help. And background-repeat: no-repeat; is only there because it doesn't cover the screen.
Any ideas? Thanks!
857
Try this:
body {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
That'll give you a full-size background image whether the window is bigger or smaller than your image.
and if that doesn't work, read the rest of this css-tricks post.
72
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
