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”.
When the file explorer window opens, navigate to your background image location on your computer. Select the image and click “Open”.
Now click the “Add Image” button to finish adding the image to the Thesis 2 Images library.
Make note of the “CSS reference” column. We will need to copy the file location, “images/background_canvas2.png”, for reference in our CSS.
Next, navigate to the Thesis 2 CSS home page. Under CSS Packages, click the “Body” button.
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.
Let’s do what Thesis 2 told us and enter the Background Image as instructed. Don’t forget to click the green “Save” button.
Back on the CSS page, don’t forget to click the green “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.
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.
Refresh your home page in your browser and it will now look something like the picture below.
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.