How to Change the Background of Your WordPress Website or Blog

Share this on:

May_and_June_2007_039.jpg via MorgueFile.com
May_and_June_2007_039.jpg via MorgueFile.com

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.

Activate Twenty Ten Theme in WordPress

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

Theme Customizer for WordPress Twenty Ten Theme

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.

Choose Background Properties for WordPress Theme

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.

Background Color Picker in WordPress

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):

WordPress Twenty Ten Theme with Custom Gray Background
Custom Pink Background for WordPress Twenty Ten

Two very different looks!

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

2 responses to “How to Change the Background of Your WordPress Website or Blog”

  1. carpenter Avatar

    I’m not that much of a internet reader to be honest
    but your sites really nice, keep it up! I’ll go ahead and bookmark your website to come back later. Cheers

  2. Marcy Diaz Avatar

    Thanks! Glad it helps you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.