How to Change Your WordPress Background Using Colors and Patterns

It’s easy to customize your WordPress background to make it unique. In this video, I show you how you can change to a different solid color as well as create a fun patterned background or upload a subtle textured background using some free tools online.

wordpress background

This technique will work for Genesis* as well as the default theme(s) included when you started your site and installed WordPress. It will also work on themes that allow you to edit your background via your Dashboard.

Can’t see the video? Watch it here.

Video Notes:

  1. Background changes are made here: Dashboard –> Appearance –> Background.
  2. You can change the solid color of the background using the color picker. Just click the “Select a Color” link under Display Options –> Background Color to choose another color. Alternatively, you can enter a hexadecimal code if you know what it is.
  3. To use a fancier background, create an image which tiles seamlessly so it looks like one large image and doesn’t use a lot of your site’s resources. The two resources I used in the video are:

Fun, huh?

*There are affiliate links in this post.

Do you get The Useletter™?


Comments

  1. Alex says

    Hello Amy,

    Thanks for the video. Just what I was looking for.

    I do have a unrelated question. What type/brand of mouse did you use when making the video? It as a very soft click sound. I love it.

    Most other tutorial video’s have a loud clicking noise that disturbs the recording.

    This was much better.

    Thanks.
    Alex.

    • says

      Hi Alex. I actually don’t use a mouse with my laptop. I used headphones with a mic to make the video so I bet that’s why it’s not very audible. Thanks.

  2. Charlotte Ann Moore says

    I downloaded a Subtle Patterns background .zip file but couldn’t get it to activate on my StudioPress eleven40 theme. Could you provide steps please?

    • says

      Hi Charlotte, first you have to grab the image file from the zip file. It needs to be unzipped first (you might try right-clicking on the zip file and choosing “Open” or “Unzip” if it doesn’t automatically unzip for you). Then, if I remember correctly, there’s a folder in which you’ll find the .png (image) file. In WordPress you’ll go Dashboard –> Appearance –> Background and upload the image. Make sure you select the option to tile the image and save. You should be good to go!

  3. Jesse Crowley says

    thank you for this post and resource. I found it very helpful. To add to the conversation, after using your two resource site you have listed I found this website: http://backgrounds.mysitemyway.com

    they had real contemporary designs and I have it very helpful.

    jesse

  4. says

    Hey there! Thank you so much for all the wonderful information you provide! I’m brand-spanking-new to WordPress, and just getting my website set up. Your tutorials and advice have given me the confidence to move forward and tackle the WordPress learning curve!

    My question is: With SubtlePatterns, I noticed they’re mostly gray-scale. Can they be re-colored in a program like paint?

  5. says

    Hi Amy! I found here via Google as I was looking for free backgrounds for WordPress. I like changing my blog look according to season/month etc. I don’t have any problems with creating headers, that’s easy peasy but backgrounds? A constant headache. I’ve decided that Subtle Patterns is now my go-to source so thanks for the tip!

  6. says

    that was so easy and such fun, I mentioned you and a big thanks for being the go0to guru for all things bloggy for me now!! love the tips and how you keep it easy and still make my blog look cool, awesome!!

  7. says

    Amy you have helped me A LOT with my blog…I do want to Thank You. To make it a win win I want to add your link in the bottom page of my blog, near were in yours says Genesis. How? Thanks :)

    • Amy says

      Thanks so much, Diana! An easy way to edit the info in your footer is to install a plugin called Genesis Simple Edits (Dashboard –> Plugins –> Add new). Then, under your Genesis menu in your Dashboard, you can select it and make your changes there. I appreciate it!

  8. Tina says

    Hi Amy, I just found you at Google Search
    Question: I ‘m trying to create a blog (wordPress) but it has been so difficult
    Can I make my blog from my IPad?
    I hope you say “yes”, because I love it.
    Waiting for you :-)

    • Amy says

      I think you can probably do quite a bit from an iPad, but designing things might get tricky. As far as basic posting though, it could work, especially if you have a keyboard.

  9. says

    I was laughing when you asked, “What color would you call this?”

    In my head I answered, “Brown.”

    And then you said, “Putty.”

    I was a little ashamed of my answer. I think at this point in the day my brain is putty. :) Thanks for the video – I have wondered how you do this. :)

  10. says

    I’m wondering the same thing about Atahualpa, Amy. As a beginner, it’s been a great theme, but I would like to “jazz it up” a little, and this seems like a great idea! Thanks in advance for any help you can provide!

    • Amy says

      Yes, you should be able to upload a background image. It’s probably not the same as is described in the video (I haven’t used Atahualpa in a while so I’m not sure what kinds of updates there have been recently), but poke around. Ask in the support forums if you can’t find an option to insert a background image to the body in your stylesheet.

  11. Maisey says

    I am brand new to WordPress (working through all the tutorials!) Is the color picker available on all Genesis Child Themes or only the Twenty Eleven theme you mentioned. Thanks!

      • says

        Hmmm…I’m using the “Pixel Happy” Genesis theme and I don’t have the option “background” under the appearance menu. Any suggestions?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>