CODEWITHSUNDEEP
htmlcssbackground
Yotam
Yotam

Reputation: 10485

Background image doesn't cover entire screen

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!

Upvotes: 3

Views: 14848

Answers (2)

PearsonArtPhoto
PearsonArtPhoto

Reputation: 39698

Your image ratio is 1620/1080=1.5, and screen resolution is 1366/768=1.77. Essentially what is happening is the image is showing up at a smaller size, while being kept to scale. The area on the right is blocked off.

Try just posting the size

background-size:100% 100%;

Upvotes: 4

crowjonah
crowjonah

Reputation: 2878

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.

Upvotes: 8

Related Questions