Responsive Background Homescreen Image


#1

I am trying to make a home screen background image responsive. Any input on how to make this occurs using css? Thanks.

Troy


#2

First create a CSS class for your background image. See here:

The responsive part can be achieved using media queries, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media screen and (min-device-width: 480px) {
    .background.scroll-content {
      background: url('../img/mybackground_480.png') no-repeat;
      background-size: cover;
    }
}

@media screen and (min-device-width: 720px) {
    .background.scroll-content {
      background: url('../img/mybackground_720.png') no-repeat;
      background-size: cover;
    }
}