[CSS] Two image backgrounds.

**respectum** · 05-01-2008, 08:05 PM

I'm designing new site and I'd like to put there 2 image backgrounds. It should look like that:

Is it possible in CSS?

**LadynRed** · 05-01-2008, 08:51 PM

Yes, it's possible. You could put the patterned background in as a background for the body, then put the stripe in as a background on a "container" div, with the stripe set to repeat ONLY horizontally.

**respectum** · 05-02-2008, 02:21 AM

I have a problem with defining the right code. Could you help me a little bit?

**gazal** · 05-02-2008, 03:50 AM

that is possible using css code follow following step :-
1) create css class like
.g{
background:url(../images/image.jpeg);
}
2)
create table using table tag
<table>
<tr>
<td class="g"> <img src="../images/gh.jpeg">
</td>
</tr>
</table>

this code will create two image at a time

**LadynRed** · 05-02-2008, 11:47 AM

NO TABLES !!!! Totally UNNECESSARY and definitely NOT modern web design

Adrian, you would need something like this:

HTML
<body>
<div id="container">
your header and the rest of your content, footer, etc. inside the container
</div>
</body>

CSS would be like this:

body{background: url(littleboxes.gif);}
#container{background url(bgstripe.gif) repeat-x;}

It's that easy.

**wayfarer07** · 05-02-2008, 03:35 PM

try adding this to your CSS document:

Code:

 table {display: none !important;}

and see if your document holds up...

**respectum** · 05-02-2008, 07:12 PM

Thank you very much. I've found another way, more dificult. I've just put one layer (div) with z-index: 1 and I've defined its lenght and hight, after all I've just set the site background as stripes_bg.gif it also works.

**LadynRed** · 05-02-2008, 08:09 PM

Why on earth would you choose to do something the HARD way, especially when I gave you an EASY solution ?? If you start using absolute positioning on everything you're GOING to have problems.

**Capt Quirk** · 05-02-2008, 10:33 PM

The Lady is right, her idea is easy, and keeps the code leaner than a table. On the other hand, I also like tables... I set my drinks down on a table... my dinner... my tv remote...

**neener** · 05-03-2008, 01:28 AM

Quote:

Originally Posted by LadynRed

NO TABLES !!!! Totally UNNECESSARY and definitely NOT modern web design

Adrian, you would need something like this:

HTML
<body>
<div id="container">
your header and the rest of your content, footer, etc. inside the container
</div>
</body>

CSS would be like this:

body{background: url(littleboxes.gif);}
#container{background url(bgstripe.gif) repeat-x;}

It's that easy.

Wow, thanks.

I've actually been trying to figure out how to do this, lol. I've been doing it the hard way.. ^o^ Very useful, LadynRed

**Gilligan** · 05-04-2008, 07:48 PM

Quote:

Originally Posted by gazal

that is possible using css code follow following step :-
1) create css class like
.g{
background:url(../images/image.jpeg);
}
2)
create table using table tag
<table>
<tr>
<td class="g"> <img src="../images/gh.jpeg">
</td>
</tr>
</table>

this code will create two image at a time

Ouch, I read this post and took an educated guess that LadynRed would b on your ~~a$$~~ behind

**imhr** · 05-04-2008, 08:40 PM