Your website’s background is important; at the very least it will act as a frame to your site content, but many modern themes provide a creative use of the background, such as utilizing parallax scrolling, or overlaying slideshows over the background image. Changing the background on your site is not an extremely difficult undertaking, but if you are unfamiliar with how WordPress and your theme all fit together it can seem far more daunting than it is. In fact, we receive many questions in our forum with just this issue, so today we’re going to look at how it’s done; the second method detailed in this article that uses CSS can even be used in Joomla or other websites too!
Changing the background – Two choices
Generally our themes will have two options for changing the background, depending on the theme and the specific type of background the theme uses. The first method is a built-in background feature that’s very easy to modify, whereas the second method is slightly more complex and uses CSS code to make the changes.
Built-in Background feature
WordPress has a built-in feature to allow users to change the background in just a few clicks, and many of our themes will offer this option. However, this option is not available for all themes, as some of them rely on using the background as part of the overall theme aesthetic, so swapping between different background options is not viable. If your chosen theme supports this feature, then all you need to do is log-in to your WordPress dashboard, then click on Appearance→Background in the left menu. You can specify your background color in this area:
It’s very simple; select a color, save the change and preview the changes. If it’s not to your liking, change it again, or click on the “Default” button to restore the original color.
In the same area above the background color option you may also specify a background image.
You may either upload a new image, or use one you have already uploaded to your media library; just click the “Choose Image” button to open the dialogue box. Once an image has been uploaded and selected you will be able to see a preview of how the background image will be displayed, and some new options that will allow you to specify the image position (left, right or center), decide whether the image should be repeated (yes, no, only vertically or horizontally), and you can choose the attachment property of the background image; that is, whether the image will scroll down the page with the user, or if it is fixed in place.
Changing the background using CSS
Using CSS to change the background may be more difficult than the built-in background feature, but using it will open up a wealth of possibilities for CSS to make your background unique.
As an example we’ll use our MO WordPress theme as a base. We’ll need to have tools that allow us to inspect elements on our website such as Firebug or Google Web Developer Tools. If we already have these tools, we can set the cursor on our background, and choose to inspect the element.
At the bottom of our browser a new set of windows should appear with the HTML code in the left column and CSS code on the right:
Usually the background is connected to the
HTML element, so we can highlight this element in the left column, and in the right column we can see the CSS code connected to it. As you can see, the element has several CSS rules, but we are interested specifically in the “background” rule, that defines the background color. Now we can either copy and paste this fragment, or manually type it into our css/override.css file (first we have to enable the override option in the template options -> advanced tab):
body {
background: #00000;
}
Or if we want to use an image background, we’ll need to specify the URL for the image using this code:
body {
background: transparent url('../images/bg.png') no-repeat center top;
}
which creates a transparent background with the image called bg.png from our Theme_Name/images directory. We can also use no-repeat,repeat,repeat-x,repeat-y to repeat the image, including only horizontally or vertically.
If you’re feeling daring you can also use a nice modern CSS3 feature called multiple background (remember that Internet Explorer 8 and below don’t support this feature!):
body {
background-image: url('../images/bg1.png'), url('../images/bg2.png');
background-position: center top, right top;
}
In this case your first image bg1.png will be centered at the top of your website and at the same time the bg2.png image will be visible in the top-right corner, next to it. (you can also use more images and positions, separated by a comma). This gives you tighter control over the background appearance.
Using CSS you can also change the background of other elements, e.g. the header; you just need to inspect this element, then replace the CSS code as before, but this time using the selector for the header; in this case #gk-header. Experiment with applying different CSS rules to different selectors, and you’ll soon get the knack!