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;
}
}