Here are the necessary steps to changing the background image of your site:
1. Copy the following code snippet and paste it into a sticky note or plaintext editor window to hold it for a moment:
body {
background-image:url('');
}
2. Right-click (ctl-click on Macs) on one of the tiles below you want to try out as a new background. A contextual menu will pop up – select ‘Copy Link’ to get the internet address of the tile. Paste that link address between the two single quotes in the code snippet you just set aside in your text editor; it will now look something like this:
body {
background:white url('https://mighty-little-websites.com/wp-content/uploads/2011/11/c19-1.jpg');
}
3. Re-select that code snippet and copy it.
4. Log in to your site’s administration dashboard then in the leftmost column go to the ‘Appearance’ / ‘Edit CSS’ screen (‘Edit CSS’ is one of the flyout submenu options under Appearance). Scroll down to the very end of the custom CSS window, hit ‘Return’ at least once, and Paste your new background code snippet.
5. Click the ‘Save Stylesheet’ button below the CSS editing window. Be sure to leave the “Add this to the Hybrid theme’s CSS stylesheet” radio button selected — you do NOT want to replace the master stylesheet entirely, just add to it.
That’s it!
While these instructions specifically address the page background itself (the ‘body’ element, in HTML terms), they can be generalized to add a background image to any block-level element in your site’s visual theme. (Another excellent candidate for a background image is #header-container — the masthead area block element.) If you’re feeling adventurous, you can certainly connect with any of these excellent tutorials on CSS to take your site’s styling to the next level:
- W3Schools
- A List Apart
- CSS documentation from the authors of our excellent CSS plugin
The Tiles:
To get the link to any of these tile images, just right-click (ctl-click on a Mac) and hold. One of your options will be “Copy Link” (you’ll paste the link URL into your modified CSS for the element you want to give a new background.)
