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
  • 190 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Sudhakarj

Dani AI

Generated

The most likely causes of the missing background images in the posted markup are HTML parsing problems and a path/link mismatch. The original post by shows an unclosed <title> and no opening <body>, and the DOCTYPE line appears malformed — browsers can stop parsing the head when header tags are broken, which prevents a linked stylesheet from being applied. File-name mismatches (case or extension) and the fact that CSS url() is resolved relative to the stylesheet (not the HTML) are also common culprits.

Useful checks and diagnostics:

  • Confirm the document has a valid DOCTYPE, a properly closed <title>, and an opening <body> before page content.
  • Verify the <link> element is inside the head and syntactically correct so the stylesheet loads.
  • Ensure image filenames and extensions match exactly (case-sensitive on most web hosts).
  • Remember that url(...) paths are relative to the CSS file location; adjust paths if styles.css lives in a subfolder.
  • Use browser developer tools (Elements/Styles and Network tabs) to spot 404s or see whether the background rules are being applied.

A minimal corrected skeleton and a safe background rule (examples shown so the differences are clear):

<!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" href="styles.css" type="text/css">
</head>
<body>
  <!-- content -->
</body>
</html>
/* banner example (adjust filename exactly as stored) */
.top_table {
  background: url("images/top.jpeg") no-repeat center top;
  background-size: cover;
}

If embedding the CSS (as suggested by ) makes the images appear, that isolates the problem to the external link/path. For horizontal banners the repeat/position ideas raised by are valid. Finally, consider moving away from table-based layout to modern CSS layout so background behavior and responsive sizing become easier to manage.

Recommended Answers

All 2 Replies

Member Avatar for Member #25180

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.