Background-Size Doesn't Work

Background-size doesn't work

As the background-size docs state:

If the value of this property is not set in a background shorthand
property that is applied to the element after the background-size CSS
property, the value of this property is then reset to its initial
value by the shorthand property.

In other words, if you're using the shorthand property but don't include the background-size rule as a part of it, the separate background-size is essentially reset and ignored.

So to get around that you just need to roll it into the background shorthand you're already using by adding a slash after the background-position and including your size:

background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;

jsFiddle example

background-size doesn't work with 100%

Your issue is not the background. Your div where you set the background has neither a width nor a height set meaning that the size of the background image is 100% of 0px.

try adding a width and height to your cover-losos div.

.cover-losos {  background: url('https://placeimg.com/640/480/any') no-repeat center center;  -webkit-background-size: 100%;  -moz-background-size: 100%;  -o-background-size: 100%;  background-size: 100%;  width: 100%;  height: 300px;}

<div class="container-fluid">  <div class="row">    <div class="col-md-12 cover-losos">    </div>  </div></div>

contain background size not working

The inline style overrides all your by CSS provided stylings. You have to specify it by background-image.

.companyImages div {
  display: inline-block;
  margin: 4px;
  width: 51px;
  height: 51px;
}

.companyImages .thubm {
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
}

<div class="companyImages">
  <div class="thubm" style="background-image: url(https://lumiere-a.akamaihd.net/v1/images/character_mickeymouse_home_mickey_notemplate_3a0db1b2.jpeg?region=0,0,600,600&width=320)"> </div>
</div>

background-size:100% 100%; doesn't work properly in Chrome

Here's a workaround:

Open your .svg file, find the <svg> tag at the beginning and add the following property inside it:

preserveAspectRatio="none"

Source: http://www.yootheme.com/support/question/6801?order=modified

Conditions when background-size: contain doesn't display background-image

So, here's what's going on

if you set your element's height by percent, CSS will look up to element's father to use his height and calculate element's height

if father has a specific height, it will calculate and get the height
But if father's height is set to auto (which is default for almost all html elements) CSS can not calculate height!

lets assume you set your body's height to 50% so CSS should multiply body's father(html) height by 50 and divide the result by 100, why it can not accomplish this task?
b'Coz : auto * 50 / 100 = ???

but if the parent(html in your case) has a specific height( assume it 400px ) CSS can easily calculate that :

400 * 50 / 100 = 200px

that is why neither height:auto works like you want nor height:100%

because in both scenarios your body's height is set to auto and auto means take as much size as your children need(your body is empty right? so the height will be 0)

but when you say height:800px it will take the height simply regardless of body's children

now,
if you want your body to get exactly same size of user's viewport
you can use vh and vw CSS units

Firstly, check out https://caniuse.com to see if your target devices support those units

then you can say

body{
    width: 100vw;
    height: 100vh;
}

this will say your body element should have all 100 percent of viewport width (vw) and viewport height(vh)

NOTICE:

background-size: contain;

will scale up or down your image as much as is necessary to make sure all of your image is visible within the parent(it maintains aspect-ration in the meanwhile)

so it's possible that some places of your body element end up white and does not get the background (if your image's aspect-ratio is different from body's aspect-ratio)

if you want all your body html to be covered with your image you should use

background-size:cover

instead of contain
this can crop your image as you mentioned...

so you need to make a choice
if your image's aspect-ratio is more important than integrity of your image, cover is the solution
otherwise (integrity matters more than aspect-ratio) you can use 100% for background-size
if both integrity and aspect-ratio are important and it's ok that some part of body loads up white and without background-image, you've made best choice by using contain

Background size cover is not working

Without seeing your actual code, answers can only be based on assumptions but I am assuming that my assumption must be correct in this case based on the screenshot provided.

From the screenshot, it seems like your element doesn't have a fixed width and is taking up 100% of the available width and also that the width is a lot higher compare to the height of the element.

(The above assumption has been confirmed by your live link.)

As per specs, the cover keyword has the following definition:

cover

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

The key parts that are relevant for this question have been emphasized. As you have indicated, in this case, the image's dimensions is 1000 x 1000 whereas the container's dimensions is [Y] x 550 where [Y] seems to be higher than 550. Now, let us assume that [Y] is 750. This would mean that the image will be scaled such that it has to fit the entire width (as it is larger). Since image has 1:1 aspect ratio, it would be scaled down to 750 x 750. Thus the image's height is greater than the container's height and so the bottom part of the image will get cropped.

You can see that in the below snippet also. The first image is the background with cover whereas the second is the actual sized image.

div {  height: 550px;  background-image: url(http://lorempixel.com/1000/1000/nature/1);  background-position: center center;  background-size: cover;  background-repeat: no-repeat;}

<div></div><img src='http://lorempixel.com/1000/1000/nature/1' />

Why does background-size contain not work on HTML or BODY if height is not defined, but background-size cover works?

The reason is that in both cases the html element (and the body) element has height equal to 0 and a width equal to screen width.

Contain always consider the smallest dimension while cover always consider the biggest one.

let's take an example with a classic element to see what is happening:

.box {
  height: 5px;
  border: 1px solid;
  margin:5px;  background:url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg) center no-repeat
}

<div class="box" style="background-size:contain"></div>
<div class="box" style="background-size:cover"></div>

background-size contain is not working

The use of !important on your background property is the problem. Since you're using the shorthand syntax for the background property, you're also setting all of the browser defaults to !important as well. Basically anything that you're not declaring explicitly in the shorthand.

From MDN:

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values. (emphasis mine)

Those 'initial values' include: background-size: auto auto. So you're basically writing:

background-size: auto auto !important;
background-size: contain;

Of course, the declaration with !important wins.

If you really need the !important declaration, put it on the specific property you're targeting (like background-repeat or whatever.

Here's a working example. The third uses !important.

a {  border: 1px solid #888;  display: inline-block;  height: 100px;  margin: 10px;  width: 100px;}a.one {  background:url('http://via.placeholder.com/350x150') no-repeat center !important;  background-size:contain;  background-origin:content-box;}a.two {  background:url('http://via.placeholder.com/350x150') no-repeat center;  background-size:contain;  background-origin:content-box;}a.three {  background:url('http://via.placeholder.com/350x150') center;  background-repeat: no-repeat !important;  background-size:contain;  background-origin:content-box;}

<a href="#" class="one"></a><a href="#" class="two"></a><a href="#" class="three"></a>