Background image wont change on media query

HTML & CSS
1

Not sure why the image is not changing for small devices?

.hero {
    height: 650px;
    background: url(../img/hero/large.jpg) no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* ----------- Large Screen Mobiles ----------- */
@media only screen and (max-device-width: 736px) { 
.hero { height: 300px;
    background: url(../img/hero/small.jpg) no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; }
}
2

CSS doesn’t work in isolation. You need to give us more information - the CSS and HTML for a fully working page, or a link to the page if it is live, would be helpful.

3

Have you tried … @media screen and (max-width: )

I think you can drop support of the vendor prefixes too. Also, the media queries only need the things that change.

Might give this a try

.hero {
  height: 650px;
  background: url(../img/hero/large.jpg) no-repeat 50% 50%;
  background-size: cover;
}

/* ----------- Large Screen Mobiles ----------- */
@media screen and (max-width: 736px) {
.hero {
    height: 300px;
    background: url(../img/hero/small.jpg) no-repeat 50% 50%;
  }
}
1 Like
4

Works perfectly Ray.H thank you!

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.