How to Edit a Theme Background

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:


  • 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.

Theme BG Code

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.

Filed Under: Computers & Technology


About the Author: Justin Belden is a freelance web & graphic designer with over 15 years' experience. He is also an Avid member of the Design/Development community and a Serial Blogger who loves to help people by sharing interesting and informative tips and trick related to computer and technology.

RSSComments (0)

Trackback URL

Comments are closed.