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:
background: url(http://cdn.css-tricks.com/images/sidebarbackground.png) right repeat-y;
But nothing happens, sadly.
Does anyone have a solution to my problem?
Thanks in advance,
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.
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.
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. :-)
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.
background: url(http://cdn.css-tricks.com/images/sidebarbg.png) repeat-y;
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.
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
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".