Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 28: Using a Background Image in Thesis 2 CSS

Thesis 2 Background Image CSS
Our site now looks something like the image above. To create some contrast between the content and the background we’ll add a custom background image.  Thesis 2 allows us to use CSS for adding background images to our site.  As an option, you can select a background color similar to how we just set the color for our header.  To get started navigate to the Thesis 2 Skin Editor.  At the top of the page click the “Images” button.  For this step I am assuming you already have an image to use.  I used Gimp to make a canvas background.

From the Thesis 2 Images page, click “Choose File”.

Thesis 2 Images Menu

When the file explorer window opens, navigate to your background image location on your computer.  Select the image and click “Open”.

Select Background Image

Now click the “Add Image” button to finish adding the image to the Thesis 2 Images library.

Thesis 2 Add Image

Make note of the “CSS reference” column.  We will need to copy the file location, “images/background_canvas2.png”, for reference in our CSS.

Thesis 2 Image Library

Next, navigate to the Thesis 2 CSS home page.  Under CSS Packages, click the “Body” button.

Thesis 2 CSS Packages List

When the Body CSS Package opens, click the “Options” tab, then expand the Background section by clicking on the black arrow.  Note the “Background Image” field.  Next to the “Background Image” title is a question mark inside brackets, “[?]”.  Clicking these symbols, Thesis 2.o will open up context sensitive Help text.  This will give you information on how to use that particular control.  Note the instructions in the image below.  Thesis 2 is telling us how to reference our background image and to not use quotes.  Thesis 2 is making it easy by adding any additional formatting in the background so we don’t have to be CSS or HTML experts.

Thesis 2 Help Screen

Let’s do what Thesis 2 told us and enter the Background Image as instructed.  Don’t forget to click the green “Save” button.

Thesis 2 Body Image CSS

Back on the CSS page, don’t forget to click the green “Save CSS” button.

Thesis 2 Save CSS Button

Go to your home page and click your browser refresh button.  You will now see your background image on your site as shown below.

Thesis 2 Background Image

You might not like the background image showing through your entire site.  Depending on the background image use, your text may become hard to read.  We can fix that in just a couple clicks.

From the Thesis 2 CSS page, click the “Container” CSS Package.  Expand the “Background” section by clicking the black arrow.  Next enter your desired color in the “Background Color” text box.  I am using a shade of off-white.  Don’t forget to click “Save” then click “Save CSS” button from the CSS page.

Thesis 2 Container CSS

Refresh your home page in your browser and it will now look something like the picture below.

Thesis 2 Container Background Color

Now our main site stands out from our background.  We are well on our way to making our site look the way we want it.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 8 comments… add one }
  • Jenna June 28, 2013, 2:24 PM

    This worked perfectly – except for one thing – after I uploaded my picture and made it my background, it because distorted! Any idea why or how I can fix that? Thanks for this awesome site! I am blundering around trying to figure out Thesis and this site has been such a huge help!

  • Doug Macklem July 21, 2013, 8:00 PM

    Your background looks good to me. Did you change something?

  • Chuck August 3, 2013, 4:44 PM

    The packages referenced here are being phased out. Thus, this process needs to be updated.

  • Doug Macklem August 4, 2013, 7:25 AM

    This site was just for fun so I’m still deciding if I want to take the time to update all the steps. Thesis 2.1 has quite a bit of interface changes.

  • Victor Silva September 11, 2013, 4:16 PM

    Thanks a lot for your fun! I tried a few tutorials on building my Wordpress / Thesis 2 site and yours is the best. Creating your tutorial looks like a lot of work. Man, I can’t picture myself doing it for fun. Big thanks to you. If you decide to update steps, I’m sure there will be many readers who, like myself, use it and love it. I had been working silently so far but I’ve been visiting your site every day for more than two weeks now. There should be others like me! All the best for you, Doug!

  • Matt P October 12, 2013, 5:34 PM

    Like Victor I have come here for help on Thesis 2 and appreciate your work now just have to figure out how to translate it to thesis 2.2

  • akash February 16, 2014, 1:22 AM

    things are different in 2.1 but thanks for the effort really helpfull

  • Doug Macklem February 22, 2014, 8:07 AM

    Yes, 2.1 has changed a number of things. I did this site for fun and haven’t gone back to update the posts. I’m sure 2.2 is going to change some things as well.

Leave a Comment