CODEWITHSUNDEEP
htmlcssmedia-queries
Anj Briones
Anj Briones

Reputation: 81

Media Query overrides background image

I have a background image that I want to change when the screen size changes. Apparently, whenever I use the Media Query, it overrides my background image to the color I've input on it. Will that work or both has to image? Thank you.

#home {
padding-top: 35px;
background-image: url("../images/homebg.jpg");
background-size: cover;
height: 100vh;
width: 100%;
}

@media (min-width: 480px) {
#home {
    background: #fcb595;
}
}

Upvotes: 0

Views: 53

Answers (2)

Minar_Mnr
Minar_Mnr

Reputation: 1405

According to your question answer is it will work and it is not mandatory that both have to be an image .

Your code is working perfectly. But I think you are confused about max-width and min-width. Your code is working nice. Working Fiddle

Html : 

<div id= "home">

</div>

Css: 

#home {
padding-top: 35px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTupAbxBl02rU1nM9ZA0OLBlsDKmoAoOlhCfUdP0XDeFLj8q1Ec");
background-size: cover;
height: 100vh;
width: 100%;
}

@media (min-width: 480px) {
#home {
    background: #fcb595;
}
}

Upvotes: 0

George
George

Reputation: 36794

It's not the media query that 'overwrites' your previously made styles, it's the fact that you are using the short-hand background style.

In most cases, this overwrites any previously set background-* styles, which includes your background-image style.

Instead, how about:

@media (min-width: 480px) {
    #home {
        background-color: #fcb595;
    }
}

Note: Unless you have some transparent portions of your background image, this style is redundant, since the background image will cover the background colour anyway.

Upvotes: 1

Related Questions