Changing the background of your WordPress theme is simple. All you have to do is to change the code in the style.css. If the style.css sheet has a file permission set to 666 or 766, you can edit it in the code editor. After you have make a changes to the code in the code editor, click on the Update Changes button so that your changes will take effect.
If you want to change a theme background, follow the instructions below:
Procedure:
- Select the stylesheet.css in the right hand column of the code editor. You can access the code editor by going to your WordPress Administration dashboard >> Appearance >> Editor.
- Scroll down until you see the body selector with its properties.
The body code looks something like this:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
color: #333;
text-align: center; }
- To change the background, you have to modify the code background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);.
- Replace url(‘images/kubrickbgcolor.jpg’) with the url of your background image that you have uploaded to your server.
- Some people might ask why there are only 3 letters after the # sign. The HTML code is made up of 3 hexadecimal numbers while the hexadecimal color code is made up of 2 hexadecimal numbers. For example, the color white in HTML is #ffffff can be shorten to #fff and black #000000 can be shorten to #000. Using the hexadecimal color code will produce the same result.
- If you want to use a certain color for the background and don’t know the color code, you can use free online color picker or hexadecimal color code generator.
- Once you have changed the HTML background color, click on the Update File button. You will see a yellow band beneath the Edit Themes. This shows that you have successfully make changes to the style.css file.
- Visit your blog and see the changes you have made.
- If you don’t know what you need to change in the theme, you can go back to the code editor and edit the background color in the style.css sheet one at a time and see the results.
