Different Background Images At Any Screen Width Using jQuery With Backstretch

There’s different methods you can use to change the background image at any screen width. Either CSS or jQuery will work.

In this case, we’ll use jQuery with backstretch and display one image named default.jpg added via the customizer, at screen widths above 960px width and another named 960.jpg which we’ll use at screen widths of 960px width and smaller and upload to our child themes images folder.

You can use this code to display any number of images at any screen widths.

This enables you to use a custom size image if your default image gets cutoff or doesn’t display at the best quality at any screen width.

The images displays full width of screen behind all page elements including header, content and footer.

Demo Video

Shows the full screen background image change at different screen widths.

Tested using the Genesis Sample child theme by StudioPress however should work without modification in any Genesis child theme.

Installation Steps

This tutorial extends a previous tutorial so you can use the code from this download folder with these installation steps.

Download Folder

Change Text Color

If your other background image is darker or lighter, you can use CSS with media queries to change the text color and other elements if needed. Example :

@media only screen and (max-width: 960px) {

body.full-screen-background {
        color: #111;
}

}

Related Tutorials