?
Solved

multiple background images on a table

Posted on 2011-10-22
9
Medium Priority
?
190 Views
Last Modified: 2012-06-27
I have an html table.

I want the first three rows to have a backgournd image.
I want the next four rows to have a background color.
I want the next three rows to have another. different, background image.

Can this be done in a cross browser friendly manner.

0
Comment
Question by:birwin
  • 5
  • 2
  • 2
9 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37013241
You would probably have to create three different tables to do that.  I don't know how a single background image can be assigned to flow across multiple elements without a single containing element that has that background.  Images can be sliced up so that pieces are put in different <td>s to make what appears to be a single background image.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 37013277
Did you try

       
                <table style="border:3px solid yellow;"> 
						  <tr style="background-image: url(/PATHTO/MYIMAGE.jpg);"> 
							<td style="border:1px solid green;padding:2px;">111111111111111111111111</td> 
                    <td style="border:1px solid green;padding:2px;">222222222222222222222222</td>
                    <td style="border:1px solid green;padding:2px;">333333333333333333333333</td> 
                    <td style="border:1px solid green;padding:2px;">444444444444444444444444</td> 
                </tr>
						  <tr style="background-color:green;"> 
							<td style="border:1px solid green;padding:2px;">111111111111111111111111</td> 
                    <td style="border:1px solid green;padding:2px;">222222222222222222222222</td>
                    <td style="border:1px solid green;padding:2px;">333333333333333333333333</td> 
                    <td style="border:1px solid green;padding:2px;">444444444444444444444444</td> 
                </tr>
						  <tr style="background-color:yellow;"> 
							<td style="border:1px solid green;padding:2px;">111111111111111111111111</td> 
                    <td style="border:1px solid green;padding:2px;">222222222222222222222222</td>
                    <td style="border:1px solid green;padding:2px;">333333333333333333333333</td> 
                    <td style="border:1px solid green;padding:2px;">444444444444444444444444</td> 
                </tr>
            </table> 

Open in new window

0
 
LVL 8

Expert Comment

by:twohawks
ID: 37013281
What I am pointing out there is I think you can do
tr style="background-image: url(/PATHTO/MYIMAGE.jpg);"
 for your rows, but Dave is right, nested tables would be the thing for providing the illusion of expanding an image across multiple rows (so don't give me any points ;^)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:birwin
ID: 37013339
My rows are each a <tr> element. so the images need to span several <tr> tags.

Here is the actual table

<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="990" >  <tr>
   <td rowspan="2" colspan="4" width="640" height="130"><div class="logos"></div> top logo</td>
   <td colspan="4" width="350" height="70">right sign in</td>
   </tr><tr>
   <td rowspan="2" colspan="4" width="350" height="120" >Second Logo</td>
   </tr><tr>
   <td rowspan="2" colspan="4" width="640" height="370">Copy and Image</td>
   </tr><tr>
   <td colspan="4" width="350" height="310"  >Sign Up button</td>
   </tr><tr>
   <td colspan="7"  width="990" height="30">menu bar</td>
   </tr>


<!--- End of first image. Start of background color --->


<tr>
   <td width="330" height="210">Feature box top left</td>
   <td colspan="3" width="330" height="210">Feature Box Top Middle</td>
   <td colspan="3" width="330" height="210">submit button</td>
  </tr><tr>
   <td width="330" height="166">feature 1</td>
   <td colspan="4" width="330" height="166">feature 2</td>
   <td colspan="2" width="330" height="166">feature 3</td>
   </tr> <tr>
   <td colspan="7" width="990" height="30">bottom divider</td>
   </tr>


<!--- End of color. Start of second image --->



 <tr>
   <td colspan="2" width="423" height="234">why</td>
   <td colspan="4" width="318" height="234">what</td>
   <td colspan="1" width="249" height="234">How</td>
   </tr> <tr>
   <td  colspan="2" width="330" height="390">News</td>
   <td colspan="2"  width="300" height="390">Social</td>
   <td colspan="4" width="360" height="390">Contact</td>
   </tr> <tr>
   <td colspan="7" width="990" height="70" >footer</td>
  </tr>
</table>
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1200 total points
ID: 37013344
Since you are using fixed sizes on the cells, you can make up a background image for the entire table that will match your cell layout.
0
 
LVL 8

Assisted Solution

by:twohawks
twohawks earned 800 total points
ID: 37015099
Ok, I unmothballed and cleaned this up.  It is not updated, so there may be a better solution out there, but this works...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Background to fit Table Using a Div</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>


<body>

<div>
	<p>This document is strict doctype using xml base and utf-8 encoding.  Tested in IE6 and up, FF, Safari, Chrome, Opera 9++<br />
<br />
PURPOSE: The idea here is to position a div relative to a group of rows in a table for giving those rows a common image background that spans the rows collectively.<br /><br />

A method for doing this using tables is to nest a table containing a grouping of rows, and then use a div-image holder as a backdrop.<br /><br />

The div must contain an image that expands and contracts to the size of the div, while same div must also expand to the size of a table ...that is contained in a tablecell in the host table.<br />
</p>

</div>

<div>Basic example of an image that expands and ccontracts within a div based on setting its outer containing div to any size.<br />
Note that the border: 4px on the img-div is what is adding the seeming padding in modern browsers.  You don't need it... Most of the borders and such here are to provide attributes to play/tweak with; although you will note the styling applied for  nulling (as well as possible) the host table's border, padding, spacing etc. styling...</div>



<div style="width:420px; height:220px; border: 1px solid blue;">
	<div style="border: 4px solid rgb(0, 0, 0);  width:100%; height:100%;">
		<img src="images/bedroom.jpg" style="display:block; width:100%; height:100%;" width="217" height="144" alt="" />
	</div>
</div>

<div style="margin: 10px 0">
Folllowing is a test-example.  (In these examples, replace your own image for the existing one.)
</div>

<table style="border:solid 0px green; border-collapse:collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr style="position:relative; display:block; height:100%; ">
			<td>
			
			<div style="display: inline-block; border: 4px solid rgb(0, 0, 0);  width:100%; height:100%; position:absolute; z-index:-10;">
				<img src="images/bedroom.jpg" style="display:block; width:100%; height:100%;" width="217" height="144" alt="" />
			</div>
			
			<table style="border:solid 1px red; " border="0">
				<tbody>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="130"><div class="logos"></div> top logo</td>
					   <td colspan="4" width="350" height="70">right sign in</td>
				  </tr>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="120" >Second Logo</td>
				  </tr>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="370">Copy and Image</td>
				  </tr>
				  <tr>
					   <td colspan="4" width="350" height="310"  >Sign Up button</td>
				  </tr>
				  <tr>
					   <td colspan="7"  width="340" height="30">menu bar</td>
				  </tr>
				</tbody>
			</table>
			
			
			
			
			</td>
		</tr>
	</tbody>
</table>


</body>
</html>

Open in new window

0
 
LVL 6

Author Closing Comment

by:birwin
ID: 37015151
Thank you Dave.
trwohawks, thank you for the help, but for my particular situation, i can't use nested tables.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 37015278
Ok Dave, thank you for the assist points!

Actually, I think we can do this without nested tables, I am going to post back again.

For now, I am going to update my previous code -for posterity-  **because it requires some modern cross-browser update tweaking...



Update Notes: If you were trying  this in
 - chrome + safari: image did not show.  requires redundant postitioning
 - IE8: image uncontrollable. requires positioning on the host TD
 - forget what else.... but this is
Tested in" FF3.5, FF3.6, FF4,  IE 6 thru 8, Safari 3 thru 4, Opera 9-11, Chrome 7-12,


THIS USES NESTED TABLE
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Background to fit Table Using a Div</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>


<body style="background-color:tan">

<div>
	<p>This document is strict doctype using xml base and utf-8 encoding.  Tested in IE6 and up, FF, Safari, Chrome, Opera 9++<br />
<br />
PURPOSE: The idea here is to position a div relative to a group of rows in a table for giving those rows a common image background that spans the rows collectively.<br /><br />

A method for doing this using tables is to nest a table containing a grouping of rows, and then use a div-image holder as a backdrop.<br /><br />

The div must contain an image that expands and contracts to the size of the div, while same div must also expand to the size of a table ...that is contained in a tablecell in the host table.<br />
</p>

</div>

<div>Basic example of an image that expands and ccontracts within a div based on setting its outer containing div to any size.<br />
Note that the border: 4px on the img-div is what is adding the seeming padding in modern browsers.  You don't need it... Most of the borders and such here are to provide attributes to play/tweak with; although you will note the styling applied for  nulling (as well as possible) the host table's border, padding, spacing etc. styling...</div>



<div style="width:420px; height:220px; border: 1px solid blue;">
	<div style="border: 4px solid rgb(0, 0, 0);  width:100%; height:100%;">
		<img src="images/bedroom.jpg" style="display:block; width:100%; height:100%;" width="217" height="144" alt="" />
	</div>
</div>

<div style="margin: 10px 0">
Folllowing is a test-example.  (In these examples, replace your own image for the existing one.)
UPDATE: Some redundant styling plus positioning for the td host container needed for cross-browser compatibility.
Tested in" FF3.5, FF3.6, FF4,  IE 6 thru 8, Safari 3 thru 4, Opera 9-11, Chrome 7-12, 
</div>

<table style="border:solid 0px green; border-collapse:collapse; border-spacing: 0px;" border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr style="position:relative; display:block; height:100%; ">
			<td style="position:relative;">
			
			<div style="display: inline-block; border: 4px solid rgb(0, 0, 0); position:absolute; width:100%; height:100%; z-index:-10;">
				<img src="images/bedroom.jpg" style="position:absolute; display:block; border: 4px solid rgb(0, 0, 0); width:100%; height:100%; z-index:-10;" width="217" height="144" alt="" />
			</div>
			
			<table style="border:solid 1px red; " border="0">
				<tbody>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="130"><div class="logos"></div> top logo</td>
					   <td colspan="4" width="350" height="70">right sign in</td>
				  </tr>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="120" >Second Logo</td>
				  </tr>
				  <tr>
					   <td rowspan="2" colspan="4" width="340" height="370">Copy and Image</td>
				  </tr>
				  <tr>
					   <td colspan="4" width="350" height="310"  >Sign Up button</td>
				  </tr>
				  <tr>
					   <td colspan="7"  width="340" height="30">menu bar</td>
				  </tr>
				</tbody>
			</table>
			
			
			
			
			</td>
		</tr>
	</tbody>
</table>


</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:twohawks
ID: 37015354
Ok, just posting back for the sake of completness...

There is no way I can see to do this using multiple tbody's, which may typically be used to group tablerows (tr's).
This is because browsers will push the div out of the tbody upon render, and there is no way to over-ride that ...that I know of.

You can see it 'would' work if you could by mocking up that way, opening in a browser, and using the developer bar re-editing to replace the div back into the tbody - result is same as nested table.

So the only other ways I can think of are either Dave's suggestion, or ditching tables for divs of course.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question