[calvinthedestroyer]

I want to stretch an back ground image inside a table data.
From what I read you have to do this with css.
I've been following this tutorial:
Faking a Stretched Background Image Over a Smaller Space

here's what I put together so far:

<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />

#bg {
width:20em;
height:30em;
}

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>

#content {
width: 20em;
height: 30em;
}

#content {
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;
}

<!--[if IE 6]>
<style type="text/css">
#bg { z-index: -1; }
</style>
<![endif]-->

This don't seem to be working. I feel that there needs to be a lot more code.
in the long run, I want to rewrite this html page for an auction:

<table>
<tr><td background="http://www.dsprototyping.com/forsale/nintendo1.jpg">
<br>
<br>
<center>
<table cellpadding=0 cellspacing=0 border=0>
<tr><td background="http://www.dsprototyping.com/forsale/back-nin1.jpg">
<font color="#FF0033"><h1>TITLE= Atari 2600 Xevious game manual instruction booklet<br></h1></font>
</td></tr>
</table>
</center>


<hr><br>

<center>
<table cellpadding=0 cellspacing=0 border=0>
<tr><td BACKGROUND="http://www.dsprototyping.com/forsale/back-nin1.jpg">
<font color="#FF0033"><h2><b>DESCRIPTION:</b></h2>
This is a 2 page game manual for Atari's game Xevious, for the Atari 7800. The game manual is printed in gray scale. The<br>
copyright is 1987 Atari Corporation, this is not the actual printed date. The manual is in fair condition, I can see<br>
some kinks when held up to a light. It will make a great addition to anyone's vintage collection. (please see picture/s)<br>
Sold As Is. Please ask questions before bidding.<br>
</p></h1></font>
</td></tr>
</table>
</center>

<center>
<font color="#FF0033"><u>comon misspellings, ex vinuse, atrai, atair, xevenus, </u></font><br>
<hr><br>
<a href="http://www.akroncdnr.com/ph/users/a4s8b7/atari-xeviovs.jpg"><img src="http://www.akroncdnr.com/ph/users/a4s8b7/atari-xeviouss.jpg" alt=" pic1" ></a>

<hr><br>

</td></tr><tr><td background="http://www.dsprototyping.com/forsale/nintendo2.jpg">

<table>
<tr><td>
<table cellpadding=0 cellspacing=0 border=0>
<tr><td BACKGROUND="http://www.dsprototyping.com/forsale/back-nin1.jpg">
<P>
<Font Size=3 color="#FF0033"><B>Payment Options</B></font>
<UL>
<Font Size=2 color="#FF0033">
<L1>$$$
<LI>Check ( 7 - 10 days )
<LI>Mon3y 0rder
<LI>Pay me securely with any major credit card through PayPal!
<P><!-- Begin PayPal Logo -->
<a href="https://www.paypal.com/"><img src="http://images.paypal.com/images/lgo/logo3v.gif" border="0"  HEIGHT=30 alt="Pay me securely with any major credit card through PayPal!" ></a>
<img src="http://images.paypal.com/images/icon_visa.gif" border="0"  HEIGHT=30 WIDTH=40 alt="Visa"> <img src="http://images.paypal.com/images/icon_mastercard.gif" border="0"  HEIGHT=30 WIDTH=40 alt="MasterCard"> <img src="http://images.paypal.com/images/icon_discover.gif"  HEIGHT=30 WIDTH=40 border="0" alt="Discover"> <img src="http://images.paypal.com/images/icon_amex.gif" border="0"  HEIGHT=30 WIDTH=40 alt="American Express"> <img src="http://images.paypal.com/images/icon_echeck.gif"  HEIGHT=30 WIDTH=40 alt="eCheck" border="0"><img src="http://pics.ebaystatic.com/aw/pics/paypal/1_ebayAny_27x20.gif" border=0  HEIGHT=30 WIDTH=40 alt="eBay Anything Points">
<!-- End PayPal Logo -->
</ul>
</p> 
</td></tr>
</table>
</td><td>
<a href="http://www.dsprototyping.com" alt="Dungeon Studios Home on the Net"><img src="http://www.dsprototyping.com/Dscard.jpg" align="right"></a>
</td></tr>
</table>
<br><hr>


<center>
<table cellpadding=0 cellspacing=0 border=0>
<tr><td BACKGROUND="http://www.dsprototyping.com/forsale/back-nin1.jpg">
<font color="#FF0033"><h2><b>SHIPPING  AND HANDLING:</b></h2>
<center>The item weighs 1 lbs and will be shipped from area code 44307.
Bidding starts at $ 3.99, NO RESERVE!
I accept (0) feedback Bidders, as long as YOU email me before bidding!
Please use PayPal if you are outside of the US.
Please email me (calvinthedestroyer) if you have any questions.
</font></center>
</td></tr>
</table>
</center>

<br>

<center>
<a href="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=calvinthedestroyer&completed=0&sort=3&since=-1&include=0&page=1&rows=25" alt="view my other Auctions"><img src="http://www.akroncdnr.com/ph/users/a4s8b7/myebay.jpg"></a>
</center>

<br>

<table BACKGROUND="http://www.dsprototyping.com/forsale/back-nin1.jpg"><tr><td>
<a href="http://www.akroncdnr.com/Login.php">
<font color="#FF0033">Sponsored by Auction Photo Hosting</font><br>
<img src="http://www.akroncdnr.com/pics/Hosting-1.gif" alt="get your account today"><br>
</td></tr>
</table>

</td></tr>
</table>

I thought there had to be two files when working with css, a *.css file that stayed on the server and an html file that just accessed the css file.

I'll keep reading, but if you can point me to a better method or tutorial, please do

----------------------update-----------------------------
I'm making some progress here is my CSS file:

	p {color: blue; font-size: 120%; } 

	h1 {font-family: Verdana, sans-serif; color: red; font-size: 20px; } 
	
	/* you can put comments in here */
	
	#bg {width:20em; height:30em;	}
	
	#content {
	width: 20em;
	height: 30em;
	}
	
	#content {
	position: relative;
	top: -30em;
	z-index: 1;
	width: 20em;
	height: 30em;
	}
	
	<!--[if IE 6]>
	<style type="text/css">
	#bg { z-index: -1; }
	</style>
	<![endif]-->

and here is my test-html page:

<link rel="stylesheet" type="text/css" href="css-test.css"> 

<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>

here is another tutorial that I found:
Introduction to CSS

This post has been edited by calvinthedestroyer: 18 February 2010 - 10:59 PM

[calebjonasson]

Inside of your style sheet you only want the classes and Ids. So when you put something like this together:

<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />

#bg {
width:20em;
height:30em;
}

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>

#content {
width: 20em;
height: 30em;
}

#content {
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;
}

<!--[if IE 6]>
<style type="text/css">
#bg { z-index: -1; }
</style>
<![endif]-->

You are going to have some issues. The following line is not a piece of CSS code. It is html and thus it should be put into your html page.

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>

As far as your question about CSS files being on a separate location on the server. This is possible however you can also use CSS code inside of the HTML document. It is placed in the head tags, at the bottom, usually before javascript if you have any. This information is put into <style> tags.
CSS information can also be loaded into the page by making a very simple link anywhere inside of the head of the page. An example of this link is something as follows:

<link href="style.css" rel="stylesheet" type="text/css" />

Note that this will create a link to a CSS sheet named style. This Sheet is also in the same folder as the HTML page.

When it comes to the HTML page that you have created; I'm not sure if that is all of the code that is within the doc. If it is then you are going to want to change this:

<link rel="stylesheet" type="text/css" href="css-test.css"> 

<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>

To this:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css-test.css"> 
</head>
<body>
<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />

<div id="content">TITLE= Atari 2600 Xevious game manual instruction booklet</div>
</body>
</html>

Hope this helps.

[calvinthedestroyer]

Thank you, that does help.

here's were I'm at right now:

<head>
<link rel="stylesheet" type="text/css" href="css-test.css"> 
</head>
<html>
<table>
<tr><td background="http://www.dsprototyping.com/forsale/nintendo1.jpg">
<br>
<br>
<center>
<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />
<div id="content1"><p class="nintendo">TITLE= Atari 2600 Xevious game manual instruction booklet</p></div>
</center>


<hr><br>

<center>
<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />
<div id="content1"><p class="nintendo"><b>DESCRIPTION:</b>
This is a 2 page game manual for Atari's game Xevious, for the Atari 7800. The game manual is printed in gray scale. The<br>
copyright is 1987 Atari Corporation, this is not the actual printed date. The manual is in fair condition, I can see<br>
some kinks when held up to a light. It will make a great addition to anyone's vintage collection. (please see picture/s)<br>
Sold As Is. Please ask questions before bidding.<br>
</p></div>
</center>

<center>
<font color="#FF0033"><u>comon misspellings, ex vinuse, atrai, atair, xevenus, </u></font><br>
<hr><br>
<a href="http://www.akroncdnr.com/ph/users/a4s8b7/atari-xeviovs.jpg"><img src="http://www.akroncdnr.com/ph/users/a4s8b7/atari-xeviouss.jpg" alt=" pic1" ></a>

<hr><br>

</td></tr><tr><td background="http://www.dsprototyping.com/forsale/nintendo2.jpg">

<table>
	<tr><td>
		<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg2" />
		<div id="content1"><p class="nintendo">
			<B>Payment Options</B>
			<UL>
			<LI>$$$
			<LI>Check ( 7 - 10 days )
			<LI>Mon3y 0rder
			<LI>Pay me securely with any major credit card through PayPal!<br>
			<a href="https://www.paypal.com/"><img src="http://images.paypal.com/images/lgo/logo3v.gif" border="0"  HEIGHT=30 alt="Pay me securely with any major credit card through PayPal!" ></a>
			<img src="http://images.paypal.com/images/icon_visa.gif" border="0"  HEIGHT=30 WIDTH=40 alt="Visa"> <img src="http://images.paypal.com/images/icon_mastercard.gif" border="0"  HEIGHT=30 WIDTH=40 alt="MasterCard"> <img src="http://images.paypal.com/images/icon_discover.gif"  HEIGHT=30 WIDTH=40 border="0" alt="Discover"> <img src="http://images.paypal.com/images/icon_amex.gif" border="0"  HEIGHT=30 WIDTH=40 alt="American Express"> <img src="http://images.paypal.com/images/icon_echeck.gif"  HEIGHT=30 WIDTH=40 alt="eCheck" border="0"><img src="http://pics.ebaystatic.com/aw/pics/paypal/1_ebayAny_27x20.gif" border=0  HEIGHT=30 WIDTH=40 alt="eBay Anything Points">
			</ul></p>
		</div> 
	</td><td>
		<a href="http://www.dsprototyping.com" alt="Dungeon Studios Home on the Net"><img src="http://www.dsprototyping.com/Dscard.jpg" align="right"></a>
	</td></tr>
</table>

<br><hr>

<center>
<img src="http://www.dsprototyping.com/forsale/back-nin1.jpg" alt="background" id="bg" />
<div id="content1"><p class="nintendo"><b>SHIPPING  AND HANDLING:</b>
The item weighs 1 lbs and will be shipped from area code 44307.
Bidding starts at $ 3.99, NO RESERVE!
I accept (0) feedback Bidders, as long as YOU email me before bidding!
Please use PayPal if you are outside of the US.
Please email me (calvinthedestroyer) if you have any questions.
</p></div>
</center>

<br>

<center>
<a href="http://cgi6.ebay.com/ws/eBayISAPI.dll?ViewSellersOtherItems&userid=calvinthedestroyer&completed=0&sort=3&since=-1&include=0&page=1&rows=25" alt="view my other Auctions"><img src="http://www.akroncdnr.com/ph/users/a4s8b7/myebay.jpg"></a>
</center>

<br>

<table BACKGROUND="http://www.dsprototyping.com/forsale/back-nin1.jpg"><tr><td>
<a href="http://www.akroncdnr.com/Login.php">
<font color="#FF0033">Sponsored by Auction Photo Hosting</font><br>
<img src="http://www.akroncdnr.com/pics/Hosting-1.gif" alt="get your account today"><br>
</td></tr>
</table>

</td></tr>
</table>
</html>

and here's the css file:

	
	.nintendo {font-family: Verdana; font-size: 13pt; color: red; } 
	
	h1 {font-family: Verdana, sans-serif; color: red; font-size: 20px; } 
	
	/* you can put comments in here */
	
	#bg {width:50em; height:10em;	}
	
	#bg2 {width:30em; height:17em;	}
	
	#content1 {
	position: relative;
	top: -10em;
	z-index: 1;
	width: 50em;
	height: 10em;
	}
	
	#content2 {
	position: relative;
	top: -10em;
	z-index: 1;
	width: 30em;
	height: 20em;
	}
	
	#content3 {
	position: relative;
	top: -10em;
	z-index: 1;
	width: 30em;
	height: 17em;
	}
	
	<!--[if IE 6]>
	<style type="text/css">
	#bg { z-index: -1; }
	#bg2 { z-index: -1; }
	</style>
	<![endif]-->

I am having trouble getting the "payment options" section to work. The <div> section does not want to share the same line as the dungeon studios picture. Plus I don't think I can do a div in side a div as you can see on my web sight, I like to use tables like crazy.

This post has been edited by calvinthedestroyer: 21 February 2010 - 12:29 AM

[Lemur]

Table based design will just screw you later on, I have some tutorials up in the CSS section about CSS layouts that would be far easier, I also have a post in the html section about why tables are evil.

I'd recommend going back through html and css though at http://www.w3schools.com