CSS image in a table (newbie question)

Forum Moderators: not2easy

Message Too Old, No Replies

CSS image in a table (newbie question)

helexia23

11:45 pm on Mar 31, 2008 (gmt 0)

I have a 3 column website. The middle column stretches with monitor resolution. I need an image at the top that is inside a table with a repeating background (so my header image looks good on any monitor).

So my question is what's the html/css to do that? I thought this would be really easy but I'm just too new at this to figure it out.

swa66

3:19 am on Apr 1, 2008 (gmt 0)

The table worries me in there, but if you want it e.g. on a h1 tag:

h1.title {background:url("file.gif") repeat-x bottom;}

Putting it on a table should work too, but I've never tried that.

helexia23

12:33 pm on Apr 1, 2008 (gmt 0)

Thanks getting close, but it brings up two things:

1. That makes the image really thin (the size of the h1 text)

2. I have to put in some kind of text for the image to show up. I just want the image, no text. Here is what I have...


<html>
<head>
<style type="text/css">
h1.title {background:url("/store/includes/languages/english/html_includes/background.gif") repeat-x bottom;}
</style>
</head><body>
<h1 class="title">text</h1>
</body></html>

swa66

1:34 pm on Apr 1, 2008 (gmt 0)

You can give the h1 the height you need it to have. You can also do replacement of the text by moving it off screen.

h1.title {  
text-indent: -5000px;  
height: 78px; /*or whatever you need*/ 
background: ... }

add to that borders, padding and margins to position it.

Reading back to your original question, as an alternative to the <h1>, you can use any tag, including a regular paragraph and put the image you want centered over the background inside that paragraph.
In that case put auto margins (might not work in IE) on the image to center it.

helexia23

2:02 pm on Apr 1, 2008 (gmt 0)

Thanks so much for the help, I will try your recommendation.

swa66

2:05 pm on Apr 1, 2008 (gmt 0)

I played a bit with it.
I had a logo of 200x78 and a rather large background image I played with.


<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Title</title> 
<style type="text/css"> 
* {padding:0; margin:0} /* reset, can be done less agressive */ 
#banner { 
 background:url("background.gif") repeat-x bottom;  
 height:100px;} 
#banner img { 
 margin: 0 auto 0 auto; /* horizontal centering */ 
 padding-top: 11px; /*half of the extra height to do easy vertical centering*/ 
 height:78px; 
 width:200px; 
 display:block} 
</style> 
</head> 
  
<body> 
 <p id="banner"><img src="logo.png" alt="graphical logo" /></p> 
 <h1>title</h1> 
 <p>ipso lorum</p> 
</body> 
  
</html>

I didn't try it in IE (that's not my idea of fun anyway), I kinda expect it to break on centering (use "text-align: center" on #banner if it does) I also avoided trying to vertically center it automatically in the background as I expect IE to have even more trouble there.
I also added a doctype in order to get away from quircks mode (the xml declaration might drop IE back into it though)