Responsive Full Screen Background Image For Genesis

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.  

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

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

  7. # 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.
  8.  

Download Folder

Related Code Snippets

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.