How to Add Multiple Background Images in Body Section of Thesis Theme

Thesis theme has number of sections like body, container, page, header, content box and footer. This tutorial helps to thesis users to add multiple different images in any section. In other words you can place different background images in different location of a single cell or section. Is there any possible to add multiple images in single div.?

Answer for this question is in single div we can add only one background image but by using nested div and hook functions we can add multiple different background images in single section. In this video tutorial I am going to explain how to add three different images in body section.

To insert multiple background image copy and pate the following code in custom_function.php file.

Step 1:

Use nested div for each image.

function back_body() { ?>
<div id="image1" >
<div id="image2" >
<div id="image3" >
<?php }

add_action('thesis_hook_before_html', 'back_body');

the above code I opened three different div for different images and if you want you can add more images. This will give the starting point of the background area.

Step 2:

To close the background area copy and paste the below code in custom_functions.php file.

function back1() { ?>
<?php }

add_action('thesis_hook_after_html', 'back1');

We know particularly body section we don’t have any hook to add any function to the body. Here I am using the hooks thesis_hook_before_html and after_html to place the image. By using the before html hook I added number of nested div for background image and after html hook helps to finish my background area. These two hooks cover total body area from header to footer. If you don’t want the same background in footer you can use the hook thesis_hook_after_content_box to close the section which helps to appear the background image only in header and content box.

Step 3:

Once you placed the above codes. Now you should upload your images file to custom/images folder.

The path is public_html/

Step 4:

Copy and paste the below code in custom.css file.

background:url("") repeat-y scroll left center transparent;
background:url("") repeat-y scroll center center transparent;
background:url("") repeat-y scroll right center transparent;

The above code you should change your image uploaded path. If you want you repeat your image in y axis otherwise use no-repeat instead of repeat-y.

In this code I have used the position left, right and center in x axis. You can replace this left with exactly where you want by specifying the distance. Example if you change left into 30em in image1 your image will appear after 30em in x axis. Also you can change y axis position by changing the center in image1 this will work when use no-repeat instead of repeat-y.  By the way you can change center and right for other images. You can also use background-position:30px; to specify the location.

Now check your site with three background images in body section.

Multiple background images in body

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 9 comments… add one }

Leave a Comment

  • aviationMY January 19, 2010, 3:27 PM

    Thank you!!!

    i am very appreciate it…this tutorial will make people gone mad because a lot of image in body make the blog looks nice..

    you are my “Raj of Thesis”

    • Pascal January 19, 2010, 3:36 PM

      Yes, the image will make the site rich look.

      • aviationMY April 6, 2010, 1:27 AM

        hi..Pascal..just wonder about this tips.

        what possibility if i want those bg images with link??

        i meant..its a click-able images….and its will be so cool if we have that..
        maybe add link in .php or what.. i dont know

        just my point of view..

        • Suresh April 9, 2010, 3:02 PM

          hai aviationMy,
          In your Php code for the image before the image src use <a href= "link url hre" ..

          Inside the particular div for one image use the below code for click cable image

          a href="link url hre" rel="nofollow" image src"give image uploaded path">

          The above code use

          a at the beginning and in the end use /a

  • Thomas August 29, 2010, 11:13 PM

    I inserted the code and my image but it didn’t work.

  • Haziq September 11, 2011, 6:19 PM

    This is awesome, man!
    One question, though: How can I add the background ONLY to ‘container’ section? I tried using:

    function back_body() { ?>

    When I add these, the image is added only to the left and right of content section; but NOT the header and nav section.. how can I make the whole ‘container’ section to have the image? You can checkout my website to see what do I mean exactly… I’d appreciate it :)

    • Suresh September 12, 2011, 9:32 AM

      hai Haziq,

      Now your site has full-width frame work..
      First switch to page frame work in (Thesis design options–>framework ) wp-admin dashboard settings.
      Now you can add background for container section only..


  • Haziq September 11, 2011, 6:24 PM

    I don’t know why the code i pasted before didn’t come out:
    function back_body() { ?>

    <?php }
    add_action('thesis_hook_after_html', 'back_body1');

    • Suresh September 12, 2011, 9:35 AM

      hai Haziq,

      In your code The function name is back_body

      But in add_action hook area you have used the name as back_body1

      just use same name in both the places..