Background image in a sidebar

[Kralle]

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

[ozee]

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.

[ozee]

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

[Kralle]

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

[ozee]

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!

[Kralle]

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. :-)

[ozee]

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;
}


[Kralle]

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?

[ozee]

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.

[ozee]

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

[Author]

Posts