Geek Answers Handbook

Background size: cover does not scale image in div

I have four identical div sizes configured as follows:

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

Each of them is 50% of the page width and is positioned absolutely. For example, for example:

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

The problem is that I am trying to scale a (large) background image using CSS3 cover art. This is the css image that I still have:

 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 does not scale correctly.

Did I miss something?

+8
css html5 css3 background-image
source share
1 answer

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

Edit:

 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 together with background-size : cover is anti-intuitive, you tell the browser to do two different things there, and it seems that modern browsers are by default an old method, not a new one.

For more information on warnings regarding background-size validation of MDN documents: https://developer.mozilla.org/en-US/docs/CSS/background-size

+16
source share

More articles:


All Articles