CODEWITHSUNDEEP
htmlcss
MultiDev
MultiDev

Reputation: 10649

Why doesn't background-size work?

I am having trouble getting background-size: cover; to work from my CSS file when specifying an inline background image via style="" tag:

CSS

header.hero {
    position: relative;
    clear: both;
    overflow: hidden;
    min-height: 390px;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover;
    background: #cccccc;
}

HTML

<header class="hero" style="background-image: url('hero.jpeg');"></header>

If I add !important to background-size: cover;, it works properly. Why can I not get this to work without !important?

Upvotes: 2

Views: 997

Answers (2)

Rafa Romero
Rafa Romero

Reputation: 2716

You are overwritting all your background styles with background: #cccccc; because you are not specifiyng the background attribute, so you should change it by

background-color: #cccccc;

by this way the background color will work as color attribute and won't overwrite the others attributes

Upvotes: 1

Stickers
Stickers

Reputation: 78696

Try changing background: #cccccc; to background-color: #cccccc;.

As background is a shorthand rule, it will override some the of values you set earlier.

Initial value, as each of the properties of the shorthand:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

Upvotes: 5

Related Questions