background-size: cover not working?

Question

This is my page http://inogroup.it/preload/index.htm

Width of image boxes is responsive

How to set the height to be responsive too? Like 50% of the screen?

If I do this change:

.pattern{
    background-size: contain;
    margin-bottom:25px;
    width:100%;
    height:50%; 
}

it's not working

Thank you very much!

Owner

You want background-size: cover to work or you want the height of the boxes to be 50% of the screen? You have 2 questions here with different answer :) – Fredericfrederica

Don't be fooled by a background image that is a .png (or any graphic) with transparency. The transparent pixels "count" as pixel content... and will be rendered in the container... and can appear to be "background-size: cover is not working". – Saraband

Answer 1

background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.

Ionogen

This solved my problem with a background image refusing to cover a DIV. – Bethink

Thanks! This haunted me for a good 20 minutes, I was well on my way to crazy ;) – Shcherbakov

Adding it after setting the image works, just as setting !important. – Beachcomber

This just saved me, too. Setting !important did not fix it either. And chrome did not report any error. Just moving the background:url(); before background-size fixed it. Weird. – Schnapps

Just to explain why this solves the problem - the background property will automatically set default values for a range of other background properties like background-position, background-size, etc if you don't specify them in the background declaration. Therefore, if you have background-size set BEFORE background, then background will override your background-size property because that's how CSS works; a property set after another property will override it, and the default value for background-size if NOT specifically set in background is auto. This isn't a bug :) – Fill

Omg , I would have never thouoght of that :) – Gerri

You are great! I never imagine that was my error ha – Spinthariscope

Answer 2

This might be a bit late but in some cases it's necessary to add background-attachment: fixed; to get background-size: cover; working.

Burnejones

This worked! Fantastic! Anyone know why this is sometimes needed? In my case I was adding an SVG image on body in Chrome 114. Without fixed it didn't go all the way to the bottom. – Accountant

Answer 3

You need to use background-image property to define background image.

So this won't work

<img class="image" style="background: url(image.jpg);" />

.image { background-size: cover; }

because background is the shorthand code and takes default values for all omitted parameters.

But if you do this

<img class="image" style="background-image: url(image.jpg);" />

.image { background-size: cover; }

This wil solve the problem.

Vic

I've never seen an image tag used this way? Are there any drawbacks to using an image tag in such a way? – Carrel

Well, background is shorthand code and it's short for background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; so if you use it to override some styles, you're basically overriding every background-related style. – Vic

Answer 4

The height of the div can be set using css height property, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:

.pattern-container .pattern {
    background-size: cover;
    background-position: 50% 50%;
    <!-- other rules here -->
}

Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).

Misconstruction

Answer 5

You can use ;

background: url('/path');
background-size: cover;

//in the style sheets

Heterotypic

Answer 6

In some cases, there may be empty space in the edges of your image itself (e.g., an icon that is surrounded by 16px of blank white space on each side) making it seem like background-size: cover; is not working when it actually is.

Just a reminder to double-check your source image :)

Fill

Answer 7

The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.

In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):

<img src="images/my_img" class="img-responsive" />

In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.

Mourant

OP is using background images, not inline. The question is asking about background:cover; and the height of each div. – Carmelo