Adjusting WordPress Site Backgrounds Using CSS

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

A Cascading Style Sheet (CSS) is a stylesheet that controls the appearance of content on a website template. Every WordPress theme you use in your site uses a CSS which provides style and design flair to your templates. Changing the default content of your website background is done by modifying the basic body components of the template you are using.

Enlarge

At the WordPress dashboard choose AppearanceEditor to open Edit Themes.

After selecting the theme you wish to work with, the related stylesheet opens in edit mode.

Scroll down in the text editor until you locate the ‘body’ indicator.

In the stylesheet, the body background is defined by hexadecimal color code like:

body {
 background: #f1f1f1;
}

Be careful. Save an original copy of the stylesheet in a text program, such as Notepad (Windows) or TextMate (Mac), so if needed, you can find the original CSS and copy and paste it back into your stylesheet.

Change the background property value using hex codes.

Make the following change:

body {
 background: #000000;
}

This will change the background color from light gray to black. The W3Schools Website has a great resource on color hex codes.

Change the background property value without hex codes.

In the case of some basic colors, you don’t have to use the color hex code. For colors like white, black, red, blue, and silver, you can just use the color name instead of the hex code..

Change the background property to use an image.

You can easily use an image as a background for your site by uploading the image into your theme directory and using the photo’s URL in the background command. The value statement would look like:

body {
background: url(images/yourimage.jpg) 
}

Update theme and review changes.

Click the update file button near the bottom of the page. Your changes are saved and applied to the selected theme. Open a new browser session, visit your site and review your changes.