Forum Moderators: not2easy
<snip>
I'd like the graphic at the left to continue down the page. I created a graphic to use as a background:
<snip>
but can't seem to make it work as a background in my <td> tag.
Any help would be greatly appreciated.
Thanks!
[edited by: Brett_Tabke at 4:35 pm (utc) on Mar. 13, 2004]
[edit reason] please, no personal urls [/edit]
<td style="background: url('images/background.gif');">
or in your stylesheet:
.background {
background: url('images/background.gif');
}
<style type="text/css">
.Leftback1 {
background-image: url(LeftBG.jpg);
background-repeat: repeat-y;
}
</style>
and this:
<td rowspan="2" style="Leftback1">
didn't work :(
To use it your HTML should look like this..
<td rowspan="2" [b][red]class[/red][/b]="Leftback1">The 'style' attribute is actually for declaring a little bit of CSS for that element.
Like this..
<td rowspan="2" style="color:#f00;background-color:#ff0;">For more information see The CSS Crash Course by Nick_W [webmasterworld.com] which is in the forum library.
Is the path to your background image correct?
Try changing your CSS to this..
.Leftback1 {
background: #f00 url(LeftBG.jpg) repeat-y;
}
If the background is now red then the problem is the path to the image. If the background is the default colour then the problem is something else with your HTML or CSS, in which case post a bit more code and we'll fix it.
By the way, it's usually a good idea to stick to lower case for filenames and paths. Some web servers can be a bit funny about it.
I think the problem is not in the css, but rather in the height of the table elements. Here's the whole thing:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.leftback1 { background: #f00 url(LeftBG.jpg) repeat-y; }
</style>
</head>
<body background="MainBG.jpg" leftmargin=0 topmargin=0>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="110%" rowspan="2" valign="top" class="leftback1"><img src="LeftSide.jpg" width="71" height="600" alt="" border="0"></td>
<td valign="top"><img src="TopMenu.jpg" width="729" height="26" alt="" border="0"></td>
</tr>
<tr align="center" valign="top">
<td><font color="White">CONTENT GOES HERE</font>
</td>
</tr>
</table></body>
</html>
Consider the following..
<html>
<head>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
body {
padding-left: 76px; /* width of image + some */
background: #F00 url(LeftBG.jpg) repeat-y;
}
#masthead {
background: #F00 url(TopMenu.jpg) no-repeat;
width: 729px;
height: 26px;
margin: 5px;
}
#content {
margin: .2em;
}
</style>
</head>
<body>
<div id="masthead"><!-- put boilerplate heading stuff here --></div>
<div id="content">
<!-- Page-specific content only here -->
<h1>My Nifty Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
