Background size does not work

Question

Here is my CSS:

.banner-text-BG { background: #00A7E1 url(images/sale_tag.png) left center no-repeat !important; background-size: 20px 20px; height: auto; padding: 15px; position: static; width: auto; -webkit-border-radius: 70px 10px 10px 70px; -moz-border-radius: 70px 10px 10px 70px; border-radius: 70px 10px 10px 70px; padding-left: 70px; } 

Contrary to all other styles, "background-size: 20px;" it doesn’t affect my page, doesn’t appear in Firebug, and does not stand out as a valid CSS instruction in Notepad ++ as a botfin. Same thing with "background-size: 20px;" or "background-size: 20px auto;"

Am I missing something? Why is this not working?

Answer 1

As background size documents :

If the value of this property is not set in the background abbreviation property that applies to the element after the background size of the CSS property, the value of this property is then reset to its initial value for the abbreviated property.

In other words, if you use the shorthand property but do not include the background size rule as part of it, the individual background size is essentially reset and ignored.

So, to get around this, you just need to flip it to the shortened area that you are already using, 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

Answer 2

Using !important to reduce background prevents the background-size property from being applied, at least in Chrome.

Removing !important allows you to resize the background. See Jsfiddle: http://jsfiddle.net/QVXsj/9/

Answer 3

"! important" should be avoided.

I would separate all the background attributes as such:

 .banner-text-BG { background-image: url(images/sale_tag.png) background-position: left center; background-color: #00A7E1; background-repeat: no-repeat; background-size: 20px 20px; }