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.
Heya,
In reply to the background image not showing issue above: I had the same dang thing. What you need to do is remove the ” ‘ ‘ ” quotes around the (‘images/textgreen.gif’), making it (images/textgreen.gif)
Cool way to test for me was to open my site, background not showing up, right click and go “view background”. It then threw an error that the file couldn’t be found, which is when I noticed in the address bar the quotes were still included.
Hope this helps and saves someone the 2 hours of my life I just wasted… 🙂
Hi there,
I created a custom background and header for my site. Both appear perfectly in Internet Explorer, but the background doesn’t appear in Firefox, Safari or Chrome. Any ideas on how to fix that? Thanks!
If you look at my custom.css on my other site, http://www.biblemoneymatters.com, you’ll see this line for the background:
body.custom {background: #000 url('images/bg1.jpg') no-repeat 50% 0%; color: #000000; margin: 0 auto;
}
on yours it shows like this:
body.custom {
background: #000 url(images/Background.jpg) 50% 0%; no-repeat; margin: 0 auto;
}
only difference i see are the ticks around the image url?
Hey I have added the custom code to my site VisualCrack.Net
body.custom {
background: #8db6b6 url(‘images/bg-ocean.jpg’) 50% 0 no-repeat;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}
.custom #page {
background: #fff;
}
and i have my file upload to f/visualcrack.info/wp-content/themes/thesis_17/custom/images/bg-clouds.jpg
i tried with the tags and without the tags, but to no avail still not working if anyone can help me it would be much appreciated.
it looks like you have the fancy quotes, instead of the tic..
’vs.
'
not sure if that’s the problem?
Help! I have inserted the code into my custom.css, tried to change the ticks, and I have placed my paper.jpg in my own “images” directory and the “thesis_17/custom/images” directory. I can’t get the image to show up. 🙁 any help would be appreciated.
/* This line adds your custom background graphic */
body.custom {
background: #000 url(‘http://urbomlawblog.com/images/paper.jpg’) 50% 0%; no-repeat; margin: 0 auto;
}
.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}
.custom #page {
background: #e3cf9c;
}
[…] you need to know in order to further utilize your layout experience can be found online, such as adding a custom background to your thesis theme, or customizing your page’s read more links. However, all of these CSS […]
try this to your background image.. just change the url
body.custom {
background-image: url(http://i1108.photobucket.com/albums/h405/Smart_Mulok/finalbackground-2.jpg);
background-attachment: fixed;
margin-top: 10em;
margin-bottom: 2em;
}