CODEWITHSUNDEEP
cssbackground-image
Alexandr Belov
Alexandr Belov

Reputation: 1834

Responsive background issue

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

Answers (4)

John Slegers
John Slegers

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

max234435
max234435

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

Jacob G
Jacob G

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

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

Upvotes: 2

sqlt
sqlt

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

Related Questions