Styling The Background Of Your Theme

Changing the background color of your website is one of the most common customizations WordPress users ask for on the forums.

The answer can be theme specific, so i thought i’d list the solutions which cover all themes.

Lets start with Genesis because this theme framework has many hidden benefits that make it the best in my opinion.

Styling Genesis Background

Genesis offers a built in function which adds support for custom backgrounds.

All you need to do is add 1 line of code to your child themes functions.php

/** Add support for custom background */
add_theme_support( 'custom-background' );

This code enables a custom background page to be added below the Appearance menu in your Dashboard.

Here you can add a background image and also change the background color quickly and easily.

Adding Background Image To Theme

Again, StudioPress child themes offer the easiest way to add a custom background image.

You can simply add this PHP code to your child themes functions.php file and add your background image to your child themes images folder.

add_theme_support( 'custom-background', array(
	'default-image' => get_stylesheet_directory_uri() . '/images/background.png',
	'default-color' => 'e5e5e5',
) );

If you’re using another theme which doesn’t provide support for custom backgrounds, then you’ll need to add CSS code to your child themes style.css file.

/* Add Background Image
------------------------------------------------------------ */
body {
background-image: url('images/bg.png');
}

In this example, the background image is named bg and has been uploaded to the child themes images folder.

If your theme doesn’t use an images folder, you can create one or upload the image to your media library and enter the full url to the image between the brackets in the code. Example:

/* Full url to Image
------------------------------------------------------------ */
body {
background-image: url ('http://wpsites.net/wp-content/uploads/2013/01/bg.png');
}

Changing Background Color

Changing the color of your background is easy.

Simply add this code to your child themes style.css file and change the value of the hex color code.

body {
background-color: #80000;
}

Background Image & Color

You may have noticed that a background image can take a few seconds to load.

This is especially true on large file sizes, poor hosting and lack of caching and/or CDN setup for your images.

The solution is to also add a background color which matches your background image color.

body { background: #000 url ('black-cloud.png') ; }

This declaration includes 2 properties in one.

You could also use 2 properties in the one declaration:

body {
background-color: #80000;
background-image: url ('images/bg.png');
}

Change Content Area Background Color

You may also like to change the background color of your content area.

#content {
	background: red;
}

Or this code for sites running HTML 5

.entry-content {
	background: red;
}

Add Different Background Image On Specific Page

The easiest way to display a unique background image on one or more pages/posts is to install a plugin like Custom Background Extended.

Changing One Specific Page/Post Background

You’ll find this tutorial useful if you want to customize the background color of one specific page or post.