ThemeShaper Forums » Thematic


Can't seem to add a <div> for a background image

(13 posts)
  • Started 11 years ago by chris_s
  • Latest reply from chris_s
  • This topic is resolved


  1. Here is what I have setup. I currently have a small background image repeating. In addition, I have a 5x256 color bar that I want to run down the left side of the theme. If someone can shed some light on why this isn't working that would be great. Thanks!

    I added this to functions.php

    // add color bg-side
    function side_div() {?>
        <div id="bg-side">
    <?php }

    and added this in my style.css

    #bg-side {
    background: url(images/bg-side.jpg) repeat-y;


    Posted 11 years ago #
  2. #bg-side has no height so you will never see the image. you might be able to adjust the width of the #wrapper div and apply the image there.

    Posted 11 years ago #
  3. If your trying to do what I think, try this example......

    body {
    #main {
    background-image: url(../../../ThematicChild/images/YOURIMAGE.png);
    background-repeat: repeat-y;

    You my have to play around with your margin settings a little also.

    Posted 11 years ago #
  4. being an amature sure is frustrating. I should have been using thematic_aboveheader. And when I have a fixed height in there it does show, but how do I get it to run down the full length of the page, as far as it will scroll? I tried height:auto; and that didn't work.


    EDIT: ok, I lied. thematic_aboveheader only pushed everything from the header down... I may have to try that second option there.

    Posted 11 years ago #
  5. using thematic_aboveheader() isn't any different than your first attempt. basically you are putting a background that you want to span the whole height of the page on a div that doesn't span the whole height of the page.

    if you are trying to create a wrapper around something then you could put the the div opener in thematic_aboveheader and then close the div in thematic_belowheader

    Posted 11 years ago #
  6. Is the site your working on "live"?

    If so what is the URL? If we could look at it we will be able to help ya out better.

    Posted 11 years ago #
  7. Sure, it's I made the height 256px so you could see the image. Thanks for the help, still trying to get over this learning curve...

    @helgatheviking, I'm not sure exactly how to hook that from thematic_aboveheader to thematic_belowheader, but if I wanted it to span the whole height of the page, would it not hook to thematic_after? Just trying to use some logic with the thematic structure.


    Posted 11 years ago #
  8. you aren't understanding. what i was suggesting was to put the beginning of the div at _aboveheader and the end at _belowheader. if you put the whole div before the header it doesn't wrap around any of the other elements, hence no height, hence no background image. and you don't hook from aboveheader to belowheader you just put part of the div on each.

    function above_stuff(){
    echo "<div id='bg-side'>"; //opens
    function below_stuff(){
    echo "</div>"; //closes

    though i still hold that the #wrapper div is already in place to do that. put your background tile on the body and the banner graphic on #wrapper.

    Posted 11 years ago #
  9. Jamie Mitchell

    Helga is right.

    you should use the body tag for your main background image repeat, that is how it is done.

    and if you want to have the color bar down the left side, use the wrapper, give it a width and margin: 0 auto, and your background: url(yoururl.jpg) repeat-y 0 0;

    easy, done...

    Posted 11 years ago #
  10. Worked just as it should. Thank you for the help.

    Posted 11 years ago #
  11. Helga, I know this is outside the scope of this thread, but would you mind explaining to me why you used echo in that function, compared to the other function that I used? I understand that you are calling the beginning of the div to in one area and closing it in another. Is echo used for that format, rather than if I was just creating a div within a parent div? I'm still fresh on php but am getting there. Reasoning from people on the forums is more helpful to me sometimes than reading books/online articles.

    Posted 11 years ago #
  12. chris- i have never read a book either. just lots of forum questions, tutorials, lord google and persistance (or stubborness depending on how you look at it)

    to answer your question...

    I used echo so that i would not have to close the <?php tags. it is just a preference i think. i could also have written:

    function above_stuff(){ ?>
    <div id='bg-side'>
    <?php }

    which is similar to what you were doing... and it would (or should) do the same thing. echo is just the php command that says print out what is in the quote marks. there is also a print command and i dont honestly know the difference.

    Posted 11 years ago #
  13. Ok, thanks for the quick schooling!

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.