Full-screen backgrounds are a great way to insert serious visual impact into an otherwise simple website. There are a lot of approaches, but we’ll cover two methods in this tutorial.
Cover or Contain
Headway’s Design Mode gives you the change to set a background image and set the background-size property as well. Background-size is new to the CSS3
specifications and has gained support in the latest versions of all major browsers, but it does not apply in older browsers (read: IE8 users won’t see the “contain” or “cover” effect) and mobile Safari doesn’t properly display it either. Browsers that don’t recognize this property will display the background at its full size.
Setting your background-size to “cover” will force the background to resize to the size of the browser window. The image’s aspect ratio will be respected, but the image will be scaled large enough to fill both the width and height of the browser window. Depending on the image, this may mean that part of your background image is off-screen.
Setting your background-size to “contain” will force the background to resize the image, while preserving the aspect ratio, to fit in the browser window so that no part of the image is off-screen. Depending on your background image, this may mean that part of the element with the background applied will not have the background (that is, the background will be too short or too narrow to fill the space).
Bottom line: This option works great if you don’t need your background size to cover or contain, and instead show full-size, in:
- IE8 or below
- FF 3.5 or below
- Safari 2.9 or below
- Opera 9.5 or below
- Mobile Safari (IOS)
That may be fine depending on the background you’re using; abstract backgrounds will do better in this scenario.
If you’re feeling adventurous, you can go beyond the Headway Visual Editor and implement backstretch.js. This is a cross-browser solution that requires the addition of two lines of code.
To start, you’ll need to download the script and upload it to your server. I’d recommend placing it in your wp-content/uploads folder if you aren’t using a child theme, or use the link to the hosted version (“//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js”)
First we’ll ensure backstretch.js is loaded with the theme. In your WordPress admin panel, add this call to load backstretch.js to Headway ► Options ► Scripts ► Header Scripts:
Add the call to initialize backstretch.js to Headway ► Options ► Scripts ► Header Scripts:
Replace “http://dl.dropbox.com/u/515046/www/garfield-interior.jpg” with your background image URL. Your desired background image can be uploaded to the WordPress media library.