RE: [WSG] two background images + fixed width layout

[Webmaster]

Tee, I'm not sure exactly what you're trying to achieve but why don't you
just try nesting a couple of divs and giving them a background image each?

The following example illustrates the idea and would visually display a
three column layout. Of course, you could use and combination of images and
positiong that you liked.

#main1 {background: url(../images/grey.gif) top left repeat-y;}
#main2 {background:url(../images/blue.gif) top right repeat-y;}

div id=main1
div id=main2
/div/div
 

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of tee
Sent: Wednesday, 21 September 2005 9:34 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] two background images + fixed width layout

Hi, I am working on a fixed width layout site that I would like to use two
background images. I know that it's impossible to do so in CSS however is
there a (standards compliant) trick I could use? Or do you know CSS based
website that use two background images that you can point me to?

I was thinking to use extra divs just  for background images but with  fixed
layout my content gone south as soon as I applied the extra divs.

Please see the current layout here:
http://lxm.lotusseeds.com/index.html

The first part of background image (dark green) is placed in the #container
which goes all the way down to #footer.
Then I have the drop shadow part of the background (dark green and earth
tone) in #wrapper, and the first part of earth tone placed in
#supportingText, then the bottom part in #footer.

However I would like to achieve this:

the first part of dark green background image runs across entire screen
horizontally (repeat-x) (I guess I can set a fixed height with no repeat-y
to achieve the visual effect I wanted)

the second part of earth tone background image runs across entire screen
horizontally (repeat-x)

and everything in the #container stays the same.

Is this do-able?

Thanks in advance!

tee

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

Re: [WSG] two background images + fixed width layout

[tee]

On Sep 20, 2005, at 4:51 PM, Webmaster wrote:

Tee, I'm not sure exactly what you're trying to achieve but why  
don't you
just try nesting a couple of divs and giving them a background  
image each?


Hi,
Sorry for my poor English :(
This is what I want :
http://lxm.lotusseeds.com/example.gif



The following example illustrates the idea and would visually  
display a
three column layout. Of course, you could use and combination of  
images and

positiong that you liked.

#main1 {background: url(../images/grey.gif) top left repeat-y;}
#main2 {background:url(../images/blue.gif) top right repeat-y;}

div id=main1
div id=main2
/div/div




And this requires fluid layout?

tee
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**

RE: [WSG] two background images + fixed width layout

[Webmaster]

 Hi,
 Sorry for my poor English :(
 This is what I want :
 http://lxm.lotusseeds.com/example.gif

Ah, yes. That helps. It's tricky but do-able. The trick will be using GIFs
with transparency. All very accessible.

 And this requires fluid layout?

Not at all. In fact, fixed layout would probably suit your purposes better
here unless you were going to use the same alignment on all your background
images. Incidentally, I would try to achieve this with two images and no
more.

Play around with it and you'll get something you're happy with. It may not
mirrow the original image exactly though.

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**