32 Comment on “Setting Background Images in the Thesis Theme for WordPress”

1. 

   Thesis Theme July 13, 2011 at 9:11 am

   I had no idea that it was this simple. Thanks for the short and sweet Thesis theme tutorial. Implementing it on my blogs in 3..2..1!
2. 

   Muntasir Mahmud Aumio July 16, 2011 at 4:23 pm

   I didn’t find my desired result.My background turns into white instead of having a bg image. it’s already uploaded on the server.
3. 

   C133 July 17, 2011 at 10:19 pm

   What’s the URL of your background image?
4. 

   Christoph Kluge August 2, 2011 at 8:54 am

   Thanks mate, great and very simple explanation. Already googled for 1 hour before I found your site. All the other codes did not work 🙂
5. 

   Amanda Evans August 23, 2011 at 9:56 pm

   Hi

   I didn’t get the result either – just a white background. Any tips?

   Thanks
   Amanda
6. 

   C133 August 26, 2011 at 9:51 am

   What is your background image URL?
7. 

   shendy wilandria October 18, 2011 at 2:50 am

   than you very much ! this is what I’ve looking for .. Great tips ,, !
8. 

   C133 October 19, 2011 at 9:48 am

   You’re welcome. Glad you found it to be helpful.
9. 

   Pubudu February 7, 2012 at 12:29 pm

   Thanks It worked 🙂
10. 

    Cyndi February 20, 2012 at 10:24 pm

    The image is really there – http://www.cfink.com/wp-content/uploads/2012/02/background.jpg

    But it’s not showing up.This is the code:
    /* to set background image */
    body.custom {
    background: url(‘http://www.cfink.com/wp-content/uploads/2012/02/background.jpg’);
    }

    What am I doing wrong.
11. 

    C133 February 21, 2012 at 4:01 am

    Hi Cyndi, are you sure you have the code in the right place? When I visit cfink.com I do not see it in the CSS. I do see the background image.
12. 

    Cyndi February 21, 2012 at 3:39 pm

    It’s in my custom.css folder. This is the code. You see an image? I don’t see an image. Thanks for you help.

    /*
    File: custom.css
    Description: Custom styles for Thesis

    BASIC USAGE:

    If you have enabled the custom stylesheet in the Thesis options panel, the tag
    will be appended with the “custom” class, like so: . You can use
    the “custom” class to override *any* CSS declarations contained in the style.css file.

    For example, if you wish to change the default link color to green, you would add the
    following declarations to this file:

    .custom a, .custom a:visited { color: #090; } <— This makes links green
    .custom a:hover { color: #00f; } <— This makes links blue when you mouse over them

    WHY THIS WORKS:

    By using the "custom" class, you are creating more specific CSS declarations for HTML
    elements. CSS styling is applied through rules of specificity, and because declarations
    prepended with .custom are more specific, they get applied when the page is rendered!

    More information about styling your Thesis installation using this file can be found
    in the User's Guide:
    http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/

    Site Design and coding by Jamie Varon of Shatterboxx Media (www.shatterboxx.com) March, 2010

    */

    .menu, .menu a, .menu li ul { border-color: white; }

    .menu, .menu a, .menu li ul {
    border: none;
    }

    /* to set background image */
    body.custom {
    background: url('http://www.cfink.com/wp-content/uploads/2012/02/background.jpg&#039;);
    }
13. 

    Cyndi February 21, 2012 at 3:46 pm

    The odd thing is that the custom.css file, in Thesis 1.8.3, seems to have disappeared. Have you noticed this? I just sent a tweet to Chris Pearson to ask this question.
14. 

    C133 February 21, 2012 at 5:32 pm

    Hi Cyndi, it’s a bit tough for me to tell from the code you posted in your comments (not all the formatting was preserved). Can you send us a copy of the actual custom.css file?
15. 

    Jeanni March 10, 2012 at 1:15 pm

    My site is not live yet..far from it. THANK YOU for an easy way and clear instructions for a newbie to get an image up! I must have searched for hours until I found your site. My only question is, what is the size my image should be to have it look like yours on here? My site is duplicating the castle on the left of my site and putting it on the right as well. Basically I want a castle on the left and its mirror image on the right, almost like bookends. I’m thinking the sizing of the pic is wrong or something bc the file I uploaded is correct. Thanks!
16. 

    C133 March 10, 2012 at 3:03 pm

    You’re welcome. We’re happy to help with your question, but will need to be able to see the site. Can you take maintenance mode down or email us how to access?
17. 

    Gabe July 24, 2012 at 8:46 am

    I give up, I’ve gone through 4 tutorials on thesis background image and none work…just get a white background 🙁 Thesis is such a pain in the ass and a huge waste of time.
18. 

    C133 July 24, 2012 at 10:44 am

    What is the code that you are using in your custom.css file?
19. 

    Jackie January 21, 2013 at 1:11 am

    how do you keep the image from tiling and moving when you scroll? i want it to be static like your photo..
20. 

    C133 January 25, 2013 at 10:52 am

    You can set the background to behave this way with some custom CSS. If you need further help, please contact us.
21. 

    Michael January 27, 2013 at 5:42 pm

    “You can set the background to behave this way with some custom CSS. If you need further help, please contact us.”

    What is the custom CSS needed to do this?

    Could you explain here or send me an email please?

    Thanks!
22. 

    C133 January 27, 2013 at 8:15 pm

    Just sent an email re: further info.
23. 

    JC Bustillos February 20, 2013 at 12:34 pm

    Amazingly simple. Gosh a lot of info out there makes it seem so complicated
24. 

    C133 February 20, 2013 at 12:38 pm

    Glad to here that this tutorial was of help for you!
25. 

    David March 30, 2013 at 1:17 pm

    How do you get a background image to stay static and not scroll?
26. 

    C133 April 1, 2013 at 5:12 pm

    It can be done with some custom CSS. If you’d like assistance, please drop us an email and we’ll be glad to help.
27. 

    Dave In Wales August 13, 2013 at 8:38 am

    Awesome
    Simple and easy to follow – worked first time

    Thanks
28. 

    C133 August 19, 2013 at 8:50 pm

    You’re welcome!
29. 

    Trevor Smith September 19, 2013 at 7:51 am

    I did get an image on background and then I couldn’t get rid of it. I deleted it from photobucket and then it left images saying deleted image etc. What a mess. I can’t find the ftp file to delete it either. There must be a way out??
30. 

    C133 September 20, 2013 at 9:25 am

    Just remove the CSS. Deleting the image on photobucket won’t solve any issues and for that matter, why are you using a background from photobucket? Save it and upload it to your media folder.
31. 

    Bryan February 24, 2018 at 2:29 pm

    I’ve had this working for years but with the new update it seems to have reverted to a purple (default) background. Also lost the white hover over the nav menu. Any ideas? I didn’t change any code, and the stuff you list lives under the “Custom CSS” tab of the Thesis page in WordPress. Thanks in advance!
32. 

    C133 February 26, 2018 at 2:33 pm

    Hi Bryan, it looks like the body class changed during the update, which is why the background image isn’t showing for you anymore. Try changing body.custom to body.template-front in the code and the background image should start showing again. Complete code shown below:

    body.template-front {
background: url('INSERT_BACKGROUND_IMAGE_URL_HERE');
}