Welcome to WebmasterWorld Guest from 54.224.45.247

Forum Moderators: not2easy

Message Too Old, No Replies

Page Background Images

Dual Images?

     
4:25 pm on Mar 15, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

4:32 pm on Mar 15, 2002 (gmt 0)

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
4:34 pm on Mar 15, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

6:01 pm on Mar 15, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Try adding overflow:hidden to the 100% div with the scrollbar...
5:15 pm on Mar 20, 2002 (gmt 0)

10+ Year Member



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.
10:29 pm on Mar 20, 2002 (gmt 0)

10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month