Page Background Images

Dual Images?

[pageoneresults]

Okay, this one is for you CSS gurus out there. I currently have a problem where I need to have a tiling image down the left side of the page and also one that tiles horizontally across the top of the page.

I've been banging my head against the wall trying to figure this out. Is it possible? I've been through all sorts of CSS classes and cannot get the effect I'm looking for.

In summary...

1. I need a background image that tiles vertically.

2. I need a background image that also tiles horizontally.

3. I need these background images on every page of the site.

This is what I am using now in my body attribute for the left side vertical tile...

background-repeat:repeat-y;
background-image:url('/images/left-blue-tile.jpg');
layer-background-image:url('/images/left-blue-tile.jpg');

P.S. The layer-background is the workaround for NN4+. It is not valid CSS according to the W3C but it solves the issue of being able to assign a background image to the page.

[Marcia]

Tables might work with no margins. It's workable as a replacement for bordered vertical (topper-type) background images, that are impossible to control the length for - either they're look long or too short. Using a tiled background image (or just color) for the page and a table across the top with an image as a tiled background within the table works. Didn't use CSS, just HTML.

[pageoneresults]

Hi Marcia! I'm trying to avoid the use of tables right now and am using CSS and absolute positioning for the entire site. Let me clarify that these are page background images that I want to have in place.

I've already tried positioning a <div> at the right side of the page that had a width:100%. That does not work, creates a horizontal scroll bar. The tiling effect works great but the page width also grows. I need something liquid.

[mivox]

Try adding overflow:hidden to the 100% div with the scrollbar...

[piskie]

Try using Div's with absolute positioning.
Set the horizontal tiling B/G Div to position 0 0 with the height set to the B/g image height and the vertical tiling Div to start at the height of the other Div with the width set to the width of the vertical tiling B/G image.
Hope that makes sense.

[jsbwm]

Try having two divs and using javascript resize the div's to be equal to the available width and height of the document. This way you would not have to use percentages but it would adjust properly for different screen sizes.

-jim