homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Page Background Images
Dual Images?
pageoneresults




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

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




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

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




msg:861383
 4:34 pm on Mar 15, 2002 (gmt 0)

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




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

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

piskie




msg:861385
 5:15 pm on Mar 20, 2002 (gmt 0)

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




msg:861386
 10:29 pm on Mar 20, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved