Jump to content

Background Image Not Displaying.


Ruud
 Share

Recommended Posts

Anyone have a clue what I am doing wrong here the background image in the left menu is not displaying?CSS:

.Main #leftmenu {	float: left; 	width: 24%;	background-image: url("images/back.gif");	background-repeat: repeat;	padding: 15px 0; }

HTML:

<div id="leftmenu"> Insert.<!-- end #leftmenu --></div>

Is inside the div. called container:

.Main #container { 	width: 80%;	background: #FFFFFF;	margin: 0 auto;	border: 1px solid #000000;	text-align: left;

Who on it's turn is inside the body:

body  {	font: 100% Verdana, Arial, Helvetica, sans-serif;	background: #FFFFFF; 	margin: 0; 	padding: 0;	text-align: center; 	color: #000000; }

Edited by Ruud
Link to comment
Share on other sites

Anyone have a clue what I am doing wrong here the background image in the left menu is not displaying?CSS:
.Main #leftmenu {	float: left; 	width: 24%;	background-image: url([b]'[/b]images/back.gif[b]'[/b]);	background-repeat: repeat;	padding: 15px 0; }

i think you only need single quotes.

Link to comment
Share on other sites

i think you only need single quotes.
I tried both.The full HTML code is:
<html><head><title>Mainpage Mag</title><link rel="stylesheet" type="text/css" href="css/general.css" /></head><body class="Main"><div id="container"> <div id="header"><table width="100%" border="0"><tr><td width="100%"><p class="right">Male | Female | Signout</p></td></tr><tr><td width="100%"><img src="images/background.png" width="100%" height="150px"></td></tr><table><!-- end #header --></div>  <div id="leftmenu"> Insert.<!-- end #leftmenu --></div> <div id="maincontent">Insert.<!-- end #maincontent --></div><br class="clearfloat" /><div id="footer"><p class="center">Footer.</p><!-- end #footer --></div><!-- end #container --></div></body></html>

Edited by Ruud
Link to comment
Share on other sites

(Don't worry about the quotes in a CSS url attribute. Quote marks aren't even required. All that matters is that the opening quote mark matches the closing mark.)Are you testing in IE? I don't have access to IE at the moment, but I cannot duplicate the problem in Firefox, Safari, or Opera. I almost duplicate it in Opera, but I can still see some background image.I only find one thing that is obviously wrong. Your closing table tag is missing its forward slash. Putting that in cures the Opera problem I mentioned, so maybe it is the problem for IE also.You should add a doctype, especially if you're writing XHTML. http://www.w3.org/QA/2002/04/valid-dtd-list.htmlIt is not necessary to give your <body> element a class name, and also not necessary to use CSS selectors that specify that a certain class or element is a child of the body. Every element (except for the <html> and <body> elements) is automatically child of the body. And id selectors don't need any parent-child relationship specified in CSS at all. I doubt any of this is messing things up, however.

Link to comment
Share on other sites

I think that the problem is the location of your CSS file.Links to files are relative to the CSS file, not the HTML file that calls it.Try this:background-image: url(../images/back.gif);

Link to comment
Share on other sites

Deirdre's Dad, that didn't help either. I am using Firefox myself for testing version 3.0.9.Possibly the full CSS could help out?

/* BUILDING THE PAGE */body  {	font: 100% Verdana, Arial, Helvetica, sans-serif;	background: #FFFFFF; 	margin: 0; 	padding: 0;	text-align: center; 	color: #000000; }.Main #container { 	width: 80%;  	background: #FFFFFF; 	margin: 0 auto; 	border: 1px solid #000000; 	text-align: left; } .Main #header { 	background: #FFFFFF; } .Main #leftmenu {	float: left; 	width: 24%;	background-image: url('images/back.gif');	background-repeat: repeat;	padding: 15px 0;}.Main #maincontent { 	margin: 0 20px 0 26%; } .Main #footer { 	background:#FFFFFF; }.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */	clear:both;	height:0;	font-size: 1px;	line-height: 0px;}/* TEXT FORMATTING */.left {text-align:left}.right {text-align:right}.center {text-align:center}

Link to comment
Share on other sites

I think that the problem is the location of your CSS file.Links to files are relative to the CSS file, not the HTML file that calls it.Try this:background-image: url(../images/back.gif);
Didn't work either. I double checked all folder names just to be sure I made no stupid mistake and in there at least I did not.The images folder is in the same folder as the CSS file is stored.The HTML page is in the "root", the CSS file in a folder in the root called "css" and the image is in a folder within the CSS folder called "images".Image extension and name are both right.
Link to comment
Share on other sites

Just a next question on the same file.Within the header div there is an image.I would like that image to be the same size of the container in " width" so that it touches the border of it.I presume this should be done by editing the margin somewhere but I do not have a clue where exactly. I tried several places but haven't been able to find the right one.

Link to comment
Share on other sites

The easiest (and best) thing is to drop the table.

<div id="header">	<p class="right">Male | Female | Signout</p>	<img src="images/background.png" width="100%" height="150px"></div><!-- end #header -->

This may not work correctly unless you have a strict doctype.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...