Reputation: 1834
What I need is responsive full background image via CSS, say like there.
I've read lots of cases here and saw also one of the "best answers" to the topic Responsive css background images
But I still can't find an appropriate solution to me. Here's my Fiddle
And code:
.container {
background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
height: 700px;
}
Without setting any height as recommended in the answer above the image doesn't appear at all. And when I resize the window to smaller, the image gets some space above instead of fitting the window every time.
What am I doing wrong?
SOLUTION
After hours of experiments it came to solution to use padding-top property instead of setting height
Upvotes: 3
Views: 157
Reputation: 47111
This should do the trick :
body {
margin: 0;
}
.wrap {
width: 100%;
}
.menu {
top: 0;
position: fixed;
background-color: green;
width: 100%;
}
.container {
background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
background-size: cover;
padding-bottom: 100%; /* <- This value should be equal to height / width */
}
<div class="wrap">
<nav class="menu">
<ul>
<li>Something</li>
</ul>
</nav>
<div class="container"></div>
</div>
(see also this Fiddle)
Upvotes: 1
Reputation: 577
Change your background-position: center;
to background-position: top;
and it will fill the space above on resize. As for the size, I'm pretty sure you need to set the height when working with background pictures.
Hope that helps!
Upvotes: 0
Reputation: 14172
Simply use background-size:cover;
on .container
like:
.container {
background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 700px;
}
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.MDN Docs
If, as you indicated in the comments below, you want the full image to be displayed, regardless of the the screen size, use background-size:contain;
:
.container {
background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: contain;
height: 700px;
}
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.MDN Docs
Upvotes: 2
Reputation: 133
Two ways come to mind depending on your end goal. The first is to use background-size: cover;
, which will keep the aspect ratio, but could cause your background image to pixelate if you have a low-resolution image. The other is to use background-size: 100% 100%;
. Note that in your fiddle, you have simple 100%
. By adding it 2 times, forces both the X and Y axes to span 100% of the screen.
Fiddle for cover
: https://jsfiddle.net/eqe3m2sn/1/
Fiddle for 100% 100%
: https://jsfiddle.net/nmofhodo/1/
Upvotes: 1