Two Background Images In Single Cell

[voidet]

Hi,

Im trying to put two backgrounds in the single cell. One background aligns to the left and the other to the right and spans across the Y-axis only at 100%. TO make this seemless i put in a bgcolor which "joins" these two images together. The result, i have a seemless background that can be stretched over any width and height and still remains seemless....

But my question is, how do i get two backgrounds in a single cell? My css so far is below::

.bgall1 {height: 100%; background: 6E6E6E url("../images/NG-MAINLEFTSTRETCH.jpg") repeat-y top left;}
.bgall2 {height: 100%; background: 6E6E6E url("../images/NG-MAINRIGHTSTRETCH.jpg") repeat-y top right;}

My HTML code where i need the background stuff is::
<td colspan="3" height="100%" valign="top" rowspan="2">

Any Help is appreciated =)
Im trying to find a way with DIV tags, but no luck so far....

[bill]

Welcome to WebmasterWorld voidet

Try nested <div>s

<div class="bgall1">
<div class="bgall2">
</div>
</div>

You may need to give them a width though...

[grahamstewart]

You can't specify two backgrounds for one element (regardless of whether it is a div or a table cell).

So here is a good way to fake it using divs..

html:

<div class="outer"> 
   <div class="inner"> 
      <h1>Hello World</h1> 
      <p> 
      blah blah blah blah.. 
      </p> 
   </div> 
</div> 

As you can see the content appears within two divs, an outer and an inner. Now we can set one part of the background on each div.

CSS:

.outer { 
   background: #666 url(graphic.gif) repeat-y top left; 
   padding-left: 50px; 
} 
.inner { 
   background: #666 url(graphic.gif) repeat-y top right; 
   padding-right: 50px; 
} 

The outer div contains the left border and places 50 pixels of left padding for the border to appear in. Likewise the inner div displays the right border and pads the right.

Adjust the padding to suit the width of your graphic.

[voidet]

THanks for both your replies and your welcome.
I have been a member for a while, however have had no need to post, all the answers were on the forums =)

Except this one.....

With the div tags do i put them in or outside the cell?
because when i put them in the cell it doesnt span right to the bottom, like the <td class="outer"> does....

I havent even tried out the double backgrounds with the DIVS yet, thought i would ask how to use them in my situation first,

[grahamstewart]

With the div tags do i put them in or outside the cell?

Neither. Just don't use a table for the layout at all if you can avoid it.

If you must place them in a cell then the cell will replace the 'outer' div and you will only need the inner div.

Currently the divs are set to expand around the text that they contain. If you want them to be bigger you may need to put

height:100%

back in there.

[voidet]

tables are a must in this circumstance,
Ok, i have got both background images to span to the bottom and are both on the right sides. However since i am forced to place the div tags in a odd position in the html (right up the top of my layout), it hides behind alot of objects,

the solution you say, padding?
I have tried padding, but it only pushes the actual objects out, and not the background itself...if there anyway to position the background images?

thank you again

[grahamstewart]

Hi voidet,

Can you explain exactly what effect you are looking for here?

Are you wanting this background across the whole page?

Or around a certain bit of text?

Or around a table?

Or in one single table cell?

tables are a must in this circumstance

Are you sure? CSS positioning is very powerful.

[voidet]

Hi,

I got it!

Thanks for all your help,

I used 1 div tag, and 1 TD tag for the backgrounds,
I had to align one bg image to the right, and the other 160px out from the left. I dont like hardcoding stuff like that, but what else can i do :S

Thanks Again

[voidet]

ok,
all along i have been previewing in opera,
now i prefer in IE6, the page goes insane, i dont think it is picking up CSS. Is there any issues here, if anything i thought it would have been the other way around?!

[grahamstewart]

Make sure you use a full doctype on your page.

e.g. the first line of your code should be...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Or one of the other doctypes from the W3C Valid Doctype list [w3.org]

This will put IE into 'standards compliant' mode and it should render the page more like a 'proper' browser (such as Opera).

It will also let you check your code for errors using the W3C HTML Validator [validator.w3.org]

[voidet]

ok did the validator,
added those lines that it recommended,
but still is screwed up,

it recommended something about encoding type, how do i add an encoding type to the page?

[grahamstewart]

Assuming your page is in standard English (e.g. the Latin 1 character set) then you'll want this...

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

to appear somewhere between <head> and </head> of your document.

Then try validating again.

[mattr555]

Take a look at the Sliding Doors technique at [alistapart.com...]

In the example, it is being used to create a rounded tab effect using 2 curved images. You could probably apply the same technique. one image applied against the table cell, the other against a tag inside the cell, <p> for example.

[voidet]

That didnt work either!
adding that meta tag in...
It works perfectly in opera, but so dodgy in IE6, like fully insanly screwed.

[grahamstewart]

Does it validate now?
If so then send me a StickyMail with the URL and I'll take a look.

[voidet]

u have been sticky mailed =)