{"id":1711,"date":"2012-01-18T15:29:04","date_gmt":"2012-01-18T20:29:04","guid":{"rendered":"http:\/\/mighty-little-websites.com\/?p=1711"},"modified":"2020-03-23T00:31:48","modified_gmt":"2020-03-23T04:31:48","slug":"add-a-background","status":"publish","type":"post","link":"https:\/\/mighty-little-websites.com\/add-a-background\/","title":{"rendered":"How to add or change a background"},"content":{"rendered":"

Here\u00a0are the necessary steps to changing the background image of your site:<\/p>\n

1. Copy the following code snippet<\/em>\u00a0and paste it into a sticky note or plaintext editor window to hold it for a moment:
\n<\/p>\n

body {\r\n background-image:url('');\r\n }<\/pre>\n
2. Right-click (ctl-click on Macs) on one of the tiles below<\/em>\u00a0you 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:<\/p>\n
body {\r\n background:white url('https:\/\/mighty-little-websites.com\/wp-content\/uploads\/2011\/11\/c19-1.jpg');\r\n }<\/pre>\n
3. Re-select that code snippet<\/em>\u00a0and copy it.<\/p>\n
4. Log in to your site’s administration dashboard<\/em>\u00a0then 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.<\/p>\n
5. Click the ‘Save Stylesheet’ button below the CSS editing window.<\/em>\u00a0Be 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.<\/p>\n
That’s it!<\/p>\n
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\u00a0block-level element<\/a>\u00a0in your site’s visual theme. (Another excellent candidate for a background image is #header-container — the masthead area block element.)\u00a0If 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:<\/p>\n