I’ve been doing a lot of Thesis Theme work for my clients lately. I’ve done everything from headers, to custom backgrounds and site setups. One thing that keeps coming up is that many folks don’t know how to add their custom graphics to the theme once I’ve completed them and sent them over. Today I thought I’d take a look at how you can add a custom background to your thesis wordpress themed website. This particular tutorial will show you how to add the background similar to how I added one to my own personal site.
2 Steps To Add Your Custom Background Graphic
Step 1: Upload your new custom background graphic to the “custom/images” directory of your thesis theme installation.
Step 2: Add a few simple lines of CSS to your custom.css file:
If you’re using the Thesis OpenHook plugin (recommended), you can just click on the “Appearance/Thesis Custom Styling” link in your wordpress admin to edit your custom.css file. On the page that comes up, the first editable text box will be your custom.css file. It is labeled “Custom Stylesheet” (see below). If you don’t have the plugin just navigate to your custom folder and edit the the custom.css file in the text editor of your choice.
To insert your new background graphic, just copy and paste the following into your custom.css file, making sure to change the url to match your own background file name (also make sure it appears exactly as below, without extra or strange characters):
/* This line adds your custom background graphic */
body.custom {
background: #000 url(‘images/BACKGROUND-FILE.jpg’) 50% 0%; no-repeat; margin: 0 auto;
}.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}.custom #page {
background: #fff;
}
Once you’ve added that information, just save. That’s it! You should now have your new custom background graphic appearing on your page!
If you want to change the background color that shows below the graphic, under the “body.custom” section, change the hexadecimal color value currently showing as “background: #000“. Change it to the color of your choice, and save!
Want to see some examples of thesis headers that I’ve done? Click here!
Want to learn some more about hooks before you start using thesis openhooks? Click here.
This post is tagged Backgrounds, Graphics, Thesis, Wordpress Themes
[...] Tutorial Showing How To Add A Custom Background Graphic To The Thesis Wordpress Theme | Logos for We… This tutorial gives a quick 3 step process on how to add a custom background graphic to your thesis wordpress theme installation with minimal CSS code. (tags: thesis thesiswp background openhook image howto tutorial wordpress) [...]
Hi. I wonder if you can help me out. I trying to add a background graphic to the following site, http://ConversationtoClarity.com, but it won’t show up. Here is the code from my custom css file.
body.custom { background: #000 url(‘images/textgreen.gif’) 50% 0%; norepeat; margin: 0 auto;}
.custom #container { margin-top: 0em; margin-bottom: 2em; padding: 0.3em; background: #D8E3DF; border: 0.1em solid
#33332f; }
.custom #page { background: #fff; }
Can you help?
Thanks.
I apologize. I just figured it out. Thanks.
If you post a problem, and then say you figured it out, the decent thing to do is to post the solution as well.
Thank you – I used this code successfully, but all of a sudden my background image is no longer loading on the site I am working on ( http://healthandnaturalmedicine.com ).
The ONLY change that I made was to add the following to my thesis custom styling to change the background color of the multimedia box:
.custom #custom_box { background: #ede8ca; }
I tried removing the line, but it didn’t make a difference. My background is gone, even though the code is still at the top of my custom.css file.
Have you any suggestions on how to fix this? I would be very appreciative!!
I’m still seeing your background image?
I am trying to use this, but I am not having any success at http://www.PreForeclosureTours.com and here is where my image is, so I do not know if I need to tweak my code /wp-content/themes/thesis_16/thesis_16/custom/images
I checked and your custom.css file doesn’t have any css included in it.
http://preforeclosuretours.com/wp-content/themes/thesis_16/thesis_16/custom/custom.css
You’ll need to save that file with the CSS mentioned above, and then it should work for you.
It is about 60% down on that page, and I see some weird symbols around the image.
/* This line adds your custom background graphic */
body.custom {
background: #000 url(‘images/background.jpg’) 50% 0%; no-repeat; margin: 0 auto;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}
.custom #page {
background: #fff;
}
I removed some weird ‘ ‘ from it and replaced it- with simple ‘ ‘ and now I have the graphic in a tile format. I would like it to be centered and only one of them that expands the entire body. I am just looking for the rays of the sun to come equally thru the background edges.
do I put in a width and height 100%? I thought the no repeat, etc would have made it do this.