Responsive background issue

Question

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

@John Slegers Both Yes and No. Yes - it "behaves" a bit better, No - it is still gotten cropped when comes about 40% of my browser window when I resize it. — Alexandr Belov, Mar 16 '16 at 19:16
@AlexandrBelov : That's because you set a fixed height. You need to remove the height and replace it with a 100% based padding. — John Slegers, Mar 16 '16 at 19:21
@AlexandrBelov : I just updated my answer. Does it now give you the expected result?! — John Slegers, Mar 16 '16 at 19:23

Jacob G · Answer 1 · 2016-03-16T19:02:05.367

2

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}

Updated JSFiddle

Edit:

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}

Updated JSFiddle

edited Mar 16 '16 at 19:02

answered Mar 16 '16 at 18:50

Jacob G

13,762
3
47
67

If we set "background-size: cover" it won't help the situation. Because if you resize the window to smaller, there's a breakpoint when the image stops being resized and gets cropped. I've just checked. – Alexandr Belov Mar 16 '16 at 18:57
@AlexandrBelov so you want the image to be fully displayed, but not distorted, no matter the screen size? – Jacob G Mar 16 '16 at 18:58
Exactly! Imagine it as the same image every time which is only being scaled but not cropped when you resize the window. – Alexandr Belov Mar 16 '16 at 19:01
@AlexandrBelov Updated the answer – Jacob G Mar 16 '16 at 19:02
"background-position: contain" must work as I had though too, but indeed it makes the image uncover the div + adds some space around when we resize to smaller. – Alexandr Belov Mar 16 '16 at 19:07
@AlexandrBelov that's what's going to happen with any solution. If you want to preserve the aspect ration of the image(not distort), then you will either crop areas out of the image on certain screen sizes, or the image not cover parts of the element on certain screen sizes. – Jacob G Mar 16 '16 at 19:21

John Slegers · Accepted Answer · 2016-03-19T23:53:03.617

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)

score 1 · Answer 3 · answered Mar 16 '16 at 19:01

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/

score 0 · Answer 4 · answered Mar 16 '16 at 19:15

0

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!

answered Mar 16 '16 at 19:15

max234435

587
5
18

Responsive background issue

4 Answers4

Edit: