Member Avatar for Dark_Omen

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.

<!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:

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.

  • 3 Contributors
  • 2 Replies
  • 176 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Sudhakarj
Member Avatar for Geek-Master

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

External:

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

Embedded:

<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

Member Avatar for Sudhakarj

try using

table.top_table  {background-image: url(images/top.jpeg);
background-repeat: repeat-x;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.