How to Change the Background of Your WordPress Website or Blog

With the latest WordPress (3.4), you are able to quickly and easily make style changes to your WordPress website or blog. This works for wordpress.com blogs or wordpress.org (self-hosted) websites.

If you don’t see these options in your theme, you can use the default Twenty Ten or Twenty Eleven themes. This post uses Twenty Ten, but Twenty Eleven is also responsive for mobile devices, and so is probably a better choice.

To activate Twenty Ten, go to your WordPress Dashboard and click on Appearance and then on Themes. Find Twenty Ten and Click the “Activate” link.

While you are still in your Dashboard > Appearance > Themes, there are three places that the background can be edited. “Background” in the Dashboard sidebar under Themes, “Background” below the activated theme and “Customization” below the activated theme.

Let’s click on “Customize” under the Twenty Ten description. Then you will see the new Theme Customizer.

Click on “Background Images” and then on the little drop down arrow next to “No Image.”

The first background image you can try is Old Mathematics by Josh Green from Subtle Patterns. The next one is Baby Pink Pastel Tileable Patterns from Webtreats Etc. I used pattern_16 resized to 200px and edited a bit.

 

 

 

You will need to set the Background Repeat to Tile; Background Position can be Left; Background Attachment can be Scroll.  If you use a very large image for your background, you would want to set the Background Repeat to No Repeat; the Background Position to Center; the Background Attachment to Fixed.

 

 

 

 

 

 

 

You will also want to edit the background color for each theme to match your pattern colors. For the gray pattern, use Hex Value #efefef, and for the pink, use Hex Value #feecf2.

 

 

 

The default header image was also changed. For the gray website, the Twenty Ten ink blot image was used. For the pink website, May_and_June_2007_039.jpg by ren was used from MorgueFile.com.

They look like this (click to see larger images):

Two very different looks!