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?

Answer 1

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