Need help to display background images using css

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,764 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,672 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3362 | Replies: 2

•

Join Date: Apr 2004

Posts: 555

Reputation: Dark_Omen is an unknown quantity at this point

Rep Power: 6

Solved Threads: 5

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

(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>

and here is the css file associated with it:

Help with Code Tags

(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

Location: Hiawassee, Georgia

Posts: 129

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

Rep Power: 4

Solved Threads: 1

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

(Toggle Plain Text)

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

Embedded:

Help with Code Tags

(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>

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

Rep Power: 0

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

(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]