Background-size: cover not scaling image in div

Question

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

``` 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?

Accepted Answer

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

Background-size: cover not scaling image in div

Solution

Problem