Headway makes adding a background image to your site a complete breeze. Let’s check it out.
How to Add a Background Image to Headway with the Visual Editor
You can upload a background image by going to site-configuration–>body–>body background imagein the headway theme visual editor.
How to Add a Repeating Background Image to Headway
It will tile across the screen and produce a repeating background pattern. Upload your image to the wp-content/themes/headway-xxx/custom/images folder and then add the following code to the bottom of your custom.css file:
/* Repeating Tiled Background Image*/
body.custom {
background-image: url('http://yoursite.com/tile-bg.jpg');
background-position: center top;
}
body.custom div#header {
background-image: url('http://yoursite.com/tile-bg.jpg');
background-position: center -30px;
}
background-position: center -10px;
Ta-da! You’ve now got a repeating background image on your site.
How to Add a Large Background Image to Headway
Let’s say you want to add a large background image to Headway that fades out into a color at the bottom. Upload your image to the wp-content/themes/headway/custom/images folder and then add the following code to your custom.css file:
/* Large Background Image */
body.custom {
background-image: url('http://yoursite.com/single-bg.jpg');
background-color: #fbfffe;
background-repeat: no-repeat;
background-position: center top;
}
body.custom div#header {background: none;}
body.custom div#wrapper {border: none;}
How to Add a Fixed Large Background Image to Headway
The above code makes the background image scroll, meaning that when you scroll, it moves with the body. Let’s say you want it to stay in the same place? Simply change the above code to this:
/* Fixed Large Background Image */
body.custom {
background-image: url('http://demo.headwayhq.com/single-bg.jpg');
background-color: #fbfffe;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
body.custom div#header {background: none;}
body.custom div#wrapper {border: none;}
How to Have a Different Background Image for Each Page
Do you wanna get really fancy? You can add a different background for each page in Headway if you know the page ID. The page ID is found on the edit pages screen in the url. It’s the number after “&post=”. You can also figure out the ID by looking at the source with FireBug. Upload your image to wp-content/themes/headway-xxx/custom/images/ and then add the following code to your custom.css file:
body.pageid-7 {background: url(custom/images/page7.jpg);}
Make sure you change the number 7 to the ID number of the page you want to modify.
How to Add a Different Background for System Pages
You can add backgrounds to system pages easily if you know they’re classes. For example, you can add a background-image to the single posts page with the following code:
body.single {background: url(custom/images/single.jpg);}
Try It Out Yourself
If you made it this far, you should be ready to try adding background images to your own Headway site.
More resources:
- CSS Background Images reference on HTML Dog
- Backgrounds Etc. – free stock background images
- Background Labs – free backgrounds and textures
Tweet