CODEWITHSUNDEEP
cssbackground
drake035
drake035

Reputation: 2897

Background-size doesn't work

Here's 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 the other styles, the "background-size: 20px;" has no effect on my page, is not visible in Firebug, and as a sidenote is not highlighted as a valid CSS instruction in Notepad++. Same with "background-size: 20px;" or "background-size: 20px auto;"

Am I missing something? Why does it not work?

Upvotes: 19

Views: 41992

Answers (3)

Matoeil
Matoeil

Reputation: 7289

"!important" should be avoided.

I would split all 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;   
}

Upvotes: 3

j08691
j08691

Reputation: 207919

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

Upvotes: 52

Marcatectura
Marcatectura

Reputation: 1695

Your use of !important in the background shorthand is preventing the background-size property from applying, at least in Chrome.

Removing the !important allows the background-sizing to take effect. See the jsfiddle: http://jsfiddle.net/QVXsj/9/

Upvotes: 2

Related Questions