HTML and CSS

Need help to display background images using css

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2004

Posts: 573

Reputation: Dark_Omen is an unknown quantity at this point

Solved Threads: 6

Dark_Omen

Offline

Posting Pro

Need help to display background images using css

Jan 21st, 2006

Hello,

I am trying to create a website, but I have ran into a snag, I can't get the images to display in the background using css. I have looked at some tutorials and did exactly what they said to do and it still hasn't worked.

Here is what I have.

This is the HTML code for my website.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
  <title>Title<title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
 
  <!Top banner of webpage>
  <table align="center" height="192" width="1024" class="top_table">
	<tbody>
	</tbody>
  </table>
 
  <!Side navigation part of webpage>
  <table align="left" height="576" width="256" class="side_table">
	<tbody>
 
	<!buttons go here>
	</tbody>
  </table>
 
  <!Main Content of Page tabel>
  <table align="right" height="576" width="768" class="main_table">
	<tbody>
	  <tr>
		<td height="50%">
		</td>
	  </tr>
 
	  <tr>
		<td></td>
	  </tr>
 
	  <tr>
		<td height="50%">
		  <h2>Website Updates</h2>
 
		</td>
	  </tr> 	 
	</tbody>
  </table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>Title<title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

  <!Top banner of webpage>
  <table align="center" height="192" width="1024" class="top_table">
	<tbody>
	</tbody>
  </table>
  
  <!Side navigation part of webpage>
  <table align="left" height="576" width="256" class="side_table">
	<tbody>

	<!buttons go here>
	</tbody>
  </table>
  
  <!Main Content of Page tabel>
  <table align="right" height="576" width="768" class="main_table">
	<tbody>
	  <tr>
		<td height="50%">
		</td>
	  </tr>

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

	  <tr>
		<td height="50%">
		  <h2>Website Updates</h2>

		</td>
	  </tr> 	 
	</tbody>
  </table>
</body>
</html>

and here is the css file associated with it:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

table.top_table  {background-image: url(images/top.jpeg);}
table.side_table {background-image: url(images/side.jpeg);}
table.main_table {background-image: url(images/main.jpeg);}

The images are located in a file called images, and the main html, css, and image folder are all in the same folder.

Thanks for the help.

•

Join Date: Dec 2004

Posts: 151

Reputation: Geek-Master is an unknown quantity at this point

Solved Threads: 6

Geek-Master Geek-Master is offline

Offline

Junior Poster

Re: Need help to display background images using css

Jan 25th, 2006

Instead of using an external stylesheet, try embedding your styles between the style tags

External:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<head>
  <title>Title<title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<head>
  <title>Title<title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Embedded:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<head>
  <title>Title<title>
  <style>
table.top_table  {
    background-image: url(images/top.jpeg);
}
table.side_table {
    background-image: url(images/side.jpeg);
}
table.main_table {
    background-image: url(images/main.jpeg);
}
  </style>
</head>
<head>
  <title>Title<title>
  <style>
table.top_table  {
    background-image: url(images/top.jpeg);
}
table.side_table {
    background-image: url(images/side.jpeg);
}
table.main_table {
    background-image: url(images/main.jpeg);
}
  </style>
</head>

This way if it works, you know that it has something to do with linking to the external stylesheet.

Else, you might need to double check your paths for the image url.

You might need to use the short version of the image extension. Instead of .jpeg use .jpg

If in doubt, reach into the trash can and remove the user guide.

•

Join Date: Jan 2006

Posts: 8

Reputation: Sudhakarj is an unknown quantity at this point

Solved Threads: 0

Sudhakarj

Offline

Newbie Poster

Re: Need help to display background images using css

Jan 26th, 2006

try using

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

table.top_table  {background-image: url(images/top.jpeg);
background-repeat: repeat-x;}

[HTML]<?xml version="1.0" encoding="UTF-8"?>
<profile>
<name> Sudhakar </name>
<location>India </location>
<website> http://sudhakarjha.com</website>
</profile>[/HTML]