Grow your CSS skills. Land your dream job.

Background image in a sidebar

  • # December 1, 2010 at 4:07 pm

    Hello everyone!

    I’m having a bit of a problem with an image which should repeat itself all the way down to the footer. I started using an image for the sidebar-div, the image stopped repeating itself down the y-axis when the content stopped. It’s a background for the sidebar.

    The structure is as followed:





















    I tried assigning the image to the content-div, since it’s surrounding both the main-content and the sidebar via the following CSS-code:

    #content {
    width: 960px;
    margin-top: 0px;
    background: url(/images/sidebarbackground.png) right repeat-y;
    }

    But nothing happens, sadly.

    Does anyone have a solution to my problem?

    Thanks in advance,
    Kralle

    # December 1, 2010 at 10:34 pm

    I don’t know if this will work for you, but I was able to change the width to a set height and the image appeared in the background. Let me know if this helps you out Kralle, here is my source code.

















    # December 2, 2010 at 12:01 pm

    Background images will only show if there is content, which is why yours stopped when the content ended. As your posted code shows no content this may be why your image is not showing. Adding a height will also force the image to show, just remember to remove it when you add content or your page will not expand.

    # December 2, 2010 at 1:33 pm

    that’s very true too! Had you tried it with content in the div that you want the background to show up on?

    # December 2, 2010 at 3:50 pm

    Yes, I only posted the structure. Nothing happens with content in it – sadly. You can see a preview here:

    # December 2, 2010 at 6:55 pm

    I played with your code in firebug some and the best way I found to do what it sounds like you are wanting is to apply that


    background: url(/images/sidebarbg.png) repeat-y;

    to the id for the sidebar wrapper. Let me know if this helps you!

    # December 2, 2010 at 7:00 pm

    Funny it showed up for me when I ran it with your structure. There must be something on the website markup that is hiding it.

    You can fix it by putting it back on the sidebar wrapper and adding overflow: auto to the content wrapper, otherwise the main content won’t extend down.

    # December 2, 2010 at 7:34 pm

    It works perfectly when I apply it to the #sidebar-wrapper, but I want it to be on #content, since a page like this page won’t allow the background to continue down to the footer. I tried applying overflow:auto to #content and the background to #sidebar-wrapper, and I got the same result.

    I should have linked to this page in the first place, my bad. :-)

    # December 2, 2010 at 8:06 pm

    I was able to get this to work by using positioning and setting a top, a bottom and a left position to the sidebar since you have a fixed width on the content, this can work for you.

    #content {
    margin-top: 0px;
    position: relative;
    overflow: auto;
    }

    #main-content {
    width: 650px;
    line-height: 15px;
    font-size: 12px;
    padding-bottom: 40px;
    position: relative;
    }

    #sidebar-wrapper {
    background: url(/images/sidebarbg.png) repeat-y;
    margin-top: 0px;
    width: 300px;
    position: absolute;
    top: 0;
    left: 650px;
    bottom: 0;
    }

    # December 3, 2010 at 3:21 pm

    I tested your profil page and the sidebarbg does show up on the content div, but you will need to change the positioning to this

    #content {
    margin-top: 0px;
    overflow: auto;
    background: url(http://pn3.theisnygaard.dk/images/sidebarbg.png) repeat-y 90%;
    }
    # December 3, 2010 at 8:00 pm

    Thanks a bunch for your help, ozee and virtual. It’s been a great help! I really appreciate all the contributions. :-) ended up using virtual’s correction.

    May I ask why exactly 90% did it, and what did it exactly do?

    # December 3, 2010 at 8:20 pm

    I like virtual’s suggestion better than mine anyhow lol, I didn’t think of that. Correct me if I am wrong; but since there is an overflow: auto the image flowed down to the footer, the 90% allowed the image to align itself to the right without touching the right side of the div, hence moving the element 90% to the right.

    # December 3, 2010 at 10:01 pm

    90% places the X value i.e. horizontal position, you already told it to repeat-y. If you don’t use the x position 90%, it automatically aligns to the left or 0. You can take out the 50% it’s redundant.
    90% was just a guestimate on my part, you can tweak it to 85% or however far over to the left you want it to appear.
    Ozee wrote “since there is an overflow: auto the image flowed down to the footer” True
    Ozee wrote “the 90% allowed the image to align itself to the right without touching the right side of the div,”
    Even if you put it at 100% it will still appear only further over to the right, the rest of the image is cut off by its container

    # December 3, 2010 at 10:29 pm

    That makes a lot more sense that my method of moving it based on using position and coordinates, learn something new everyday I guess!

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".