Background-size: cover not scaling image in div

Question

I have four equally sized div's set up like this:

<div id="top-left"></div>
<div id="top-right"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

Each is 50% of the page's width and positioned absolutely. Like this, for example:

#top-right {
position: absolute;
top: 0px;
left: 50%;
width: 50%;
height: 50%;
}

The issue is when I try to scale a (large) background image via the CSS3 cover. This is the background image css I have so far:

background: #000 url('DSC01992.jpg') center center fixed no-repeat;
background-size: cover;
-moz-background-size: cover;
-o-(etc.)

Here is a live example: http://jsfiddle.net/TqQv7/

If you open the placeholder image here: http://placekitten.com/2000/1000 you will see that the image is not being scaled correctly.

Am I missing something?

It is being scaled, but cover makes the BG image as big as possible. What is your intended behavior? — Kyle, Aug 27 '12 at 17:16
@KyleSevenoaks Each div responds to the window's size, so the background image needs to also scale accordingly. — Connor, Aug 27 '12 at 17:27

Jasper · Accepted Answer · 2013-08-01T19:49:54.487

18

Removing the background-position and background-attachment portions of your short-hand background declaration will give you your desired results.

Change:

background: #000 url('http://placekitten.com/2000/1000') center center fixed no-repeat;

To:

background: #000 url('http://placekitten.com/2000/1000') no-repeat;

Here is a demo: http://jsfiddle.net/TqQv7/1/

Using ~~background-position and~~ background-attachment along with background-size : cover is anti-intuitive, you're telling the browser to do two different things there, and it seems that modern browsers still default to the old method rather than the new.

For more information about caveats regarding background-size check-out the MDN docs: https://developer.mozilla.org/en-US/docs/CSS/background-size

edited Aug 01 '13 at 19:49

answered Aug 27 '12 at 17:15

Jasper

75,717
14
151
146

2

I think you can keep `center center`, it's just `fixed` which is causing it to scale to the window dimensions, rather than the container div dimensions – andrewtweber Mar 31 '13 at 03:36
2

verified, just removing 'fixed' "fixed" the issue :D – Benjamin Intal Aug 01 '13 at 15:31
2

Indeed, taking the "fixed" off fixes the issue...but what if I want to have a fixed contained image on a div? Thanks – Jonathan Jan 30 '14 at 12:08

Background-size: cover not scaling image in div

1 Answers1