Tag: Customizer

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

• Change Backstretch Background Image When Mobile – AgentPress Pro

You can select this template to load on single pages or posts so it displays a unique background image full screen behind all page elements including the header, content area, sidebar and footer on all screen sizes.

If no image added, a default image added to your child themes images folder named default.jpg which can be changed using the Customize > Full Screen Image setting.

The template includes code which enables you to :

• The a custom field named dark to display white text on a dark background image
• The a custom field named light to display dark text on a light background image
• Add a link for your own image to display a unique image on each page or post

Demo Video

Shows a full screen background image displaying behind all page elements in Genesis when the Full Screen Background template is selected. Custom fields enable you to change the default image and text color.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

1. # Upload the file named full-screen-background.php & the folder named js to your Genesis child theme folder like this :

 


2. # Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

 


3. # Copy & paste the CSS from the style.css file to the end of your child themes stylesheet and clear caching.

 


4. # Add your background image using custom fields as seen in the demo video and select the text color using the dark or light background. You can also upload a default background image using the Customize > Full Screen Image setting.

 

Download Folder

Related Code Snippets

• Different Background Images At Any Screen Width Using jQuery With Backstretch