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.
Be Sociable, Share!

Related posts:

  1. How to Change the Style of WordPress Header
  2. How to Make Your MySpace Background Transparent
  3. How to Use HTML
  4. How to Change WordPress Theme
  5. How to Add a Theme to WordPress

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.