I’m trying to position a background image in a somewhat unconventional way.
I have a long vertical div that i’m using as a side nav. I want to have the top of the div contain a transparent gif (it has a special shape to it we need), but the bottom to have a repeating background that will repeat all the way to the bottom of the div. This div is inside of the body wrapper so it is the height of the whole site…I am having troubles getting the background to repeat down the whole bar.
So far when I use the background:repeat with specific positioning (like position: 0px 150px;) it ignores the position
Any ideas? I can post the code I am using if it would be helpful…just let me know.
Your explanation is long and I think I could get a better visual if you directed us to a link where this is at? Please also clarify a bit (what images you want doing what) when you post hte link
Can you separate the area with the special shape from the repeated region (as far as content goes)? If so, you can apply the backgrounds to two separate divs, one after the other.
Otherwise, you can try using nested divs, the outer one with the repeating bg and the inside one with the shape bg aligned to the top.
Something like this:
<style>
.outer {background: url(...) repeat-x center;}
.inner {background: url(...) no-repeat top;} // Don't apply a bg-color to this or else it will cover the repeating bg
</style>
<div class="outer">
<div class="inner">
<p>Content in here can go down as far as it wants and the outer div will extend with the repeating bg.</p>
</div>
</div>
Hello, if your repeat image code is correct and it is not repeating down to your desired height, then it’s likely the height of the div in which it is residing thats preventing it’s travels. Put the repeating image on your outer container instead (which most likely does carry with it the desired height).
i know it is confusing. unfortunately i can’t post the url as it’s in dev right now & confidential.
here is a link to the basic structure i’m talking about.
we need the top of the div to be transparent, so you can see the body background through it (because it’s curved). however, we want that whole shape to have this repeating background so it goes all the way to the bottom. there’s a div inside with the menu, and another below that with some extra info. we need a variable height, and applying the bg to one of the nested divs cuts it off at the end of that div’s content. does that make more sense?
(we’re using a transparent png at the top of that div, so having the repeating background behind it would cancel the transparency - we dont want to see the pattern behind the top of it)
So far when I use the background:repeat with specific positioning (like position: 0px 150px;) it ignores the position
It doesn’t ignore it It’s just the starting position for the image and then the image is repeated in both directions from that point until the whole element is filled (e.g. up and down but starting the top of the image at 150px from the top)
It’s a little complicated but you could use my absolute column overlay technique to do something like this.
That won’t work I’m afraid for equal columns as you can’t repeat the graphics to the bottom as they will also slide under the transparent image.
The example I posted starts much the same as you said anyway except that I have also added a mechanism for the equal columns and repeating full length backgrounds.
Your method would work for unequal columns of course as it would just be a normal setup
The transparent image and the repeating background are in separate divs, and unless you float them they won’t overlap, but yes, it doesn’t allow for equal columns.
The only other thing I can think of is to not use a transparent image for the circle… it is possible to absolutely position the column so it lines up with the background. Then you don’t have to worry about the repeating bg behind it. Unless you plan on changing the background often it would make sense to try it out.
Have you tried using Faux Columns to get the background repeating all the way down the page? Then you can still set a background image on the sidebar to get the images at the top.
I’m not entirely sure how you’ve coded it, but if the transparent circular image is in the HTML, and you don’t want to see the sidebar background through it, you could either recreate it without a transparent background, or create a white circle of the right size on a transparent background and set that as a background image on the <img>.
That won’t work I’m afraid because the faux column will be behind the transparent image and hide the body background (which if it is a repeating image will not match even if you place another image behind the transparent image to match the body background - although it was my first thought also and would work if the body background was not a repeating image or was fixed in some way).
The solution I gave above (with a live example) fulfils all the requirements easily and I don’t understand why anyone else can’t see it lol. It allows for repeating background image to start after the transparent section and repeat forever as required and with equal columns.
There simply is no other suitable method to do this based on those criteria.
