Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 6610

Jan 21st, 2006

Need help to display background images using css

Expand Post »

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.

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:

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.

Similar Threads

Desktop background not changeable -- display properties inaccessible in Viruses, Spyware and other Nasties
Rounded Tabs in HTML and CSS
Help with CSS - background extending to 100% in HTML and CSS
problems with tables in firefox in HTML and CSS

Dark_Omen

Reputation Points: 23

Solved Threads: 6

Posting Pro

Offline

573 posts
since Apr 2004

Permalink

Jan 25th, 2006

Re: Need help to display background images using css

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

External:

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:

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

Geek-Master

Reputation Points: 12

Solved Threads: 6

Junior Poster

Offline

156 posts
since Dec 2004

Permalink

Jan 26th, 2006

Re: Need help to display background images using css

try using

HTML and CSS Syntax (Toggle Plain Text)

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

Sudhakarj

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Jan 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: making a registration page

Next Thread in HTML and CSS Forum Timeline: Foto attachments to/in formmail

DaniWeb Message

Cancel Changes

User Name
Password