Images on CSS Borders

[MoreMana]

Hey all,

Another question I have here. You can take a look at my website here. http://www.moremana.com/Zencart.

I'm trying to get the attached images to hug the borders of the outside white area. I also need the "botright.jpg" to hug the bottom right corner of the white area. I cant for the love of me find how to tweak the .css files to do this.

Any help would be much appreciated. Thank you.

Brad

[kobra]

As you are using a fixed width template you can Google "css sliding door technique" and apply it vertically. You can also look at one of the free templates that uses this horizontally as I recall "FutureZen" for a bit of guidance

[MoreMana]

Thanks for the response.

It is a fixed width through CSS. I understand the theory how I can position the images given a fixed position. However that does not help when the height of the table is dynamic.

Does anyone have some example code how I can dynamically position the bottom right image on the bottom right part of the white area. Also I'm still not sure how to implement the code on the vertical positions. Any help would be greatly appreciated.

Thanks in advance,
Brad

[MoreMana]

Just doing some more research on it. It looks like if I can modify code (which I dont know which code to modify) to create a new container at the bottom of every page created with that image fixed at a certain position it would solve my problem.

Any ideas how to do that?

[kobra]

Assuming that you desire this around your complete site and referencing what I posted earlier you can use tags that currently exist that have no image attached.

For the bottom add a background image that is smaller to #siteinfoLegal or #navSuppWrapper if you have not altered things and your main image to #mainWrapper and it will be the top & sides and much higher than any page you will ever display and the extra will "slide" behind the bottom or "sliding door"

Let me know where in Den you are by PM

[gjh42]

#mainWrapper {background: #ffffff url(../images/botright.gif) right bottom no-repeat;}

#contentMainWrapper {background: transparent url(../images/leftborder.gif) left top no-repeat; padding-left: 12px;}

[MoreMana]

Thanks for the help guys. A couple of things that I may have confused you with and not made clear.

I want the image to kind of overlap the two borders so it covers the border lines. To do this I need to insert the image at a specific position. What's the code for that?

Also I think I can set the botrightborder image on the bottom of the page and then do a -px, -px command which would make it static no matter how large the content is. Any idea what the code is for that?

Thanks in advance,
Brad

[gjh42]

The "right bottom" in the code I posted will keep that image at the bottom right of #mainWrapper, no matter how big it is.

You can specify locations precisely in several ways, but the background image will never show outside of the edge of its container. If you need that, you will have to use the image as a foreground image with absolute positioning (which can be relative to the bottom right edge of the container, with negative margins.)

[kobra]

I would recommend attaching them to the inside of the container as a background image and then adjust the location of the container contents through margin or padding

[gjh42]

The OP's desire is to have the image straddle the visual edge of the container; padding may be needed for other things, but won't accomplish that.
The best way I can think of to have a bg image extend over a visual edge is to have that edge belong to an outer container, and use negative margins on the inner container to pull its bg image to the desired position. Note that this may not work if one of the containers is a table cell - I have found that they don't obey some styling properties that divs obey.