Jump to content

Background Image does not display properly (Actually it don't display) HELP!

Chezshire

By Chezshire
in CSS Help

 Share

Recommended Posts

Chezshire Regular Member

Chezshire

Posted
Posted

Hello Everyone,

  I'm in the final stretch of the first website which I've ever built for anyone besides myself. I have two final problems, both of which did not manifest until I uploaded the files on to my actual server space.

 

Problem One: Background fire image is not displaying.

Problem Two: My Faux Column is not working (see odd yellow gap at the lower left side menu - I'm going to break this out into a separate topic on this forum as I believe that these are separate issues.)

 

Below is the css, links and screenshots to my problem, any help is appreciated greatly!

 

 

Link to troublesome page: http://xpg.us/xSCC/xFinalP/dinnersforsinners/show/show.html

Link to how the page should look: http://xpg.us/xSCC/xFinalP/dinnersforsinners/_deleteMe.jpg

 

CSS: 

/* Wildcard & Body are in dfs_divs.css */

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .90em;
color: #aa9f4e;	
background-image:url('images/bkg/BkG_background.jpg');
background-color: #f4c34c;
background-position:center; 
background-repeat: no-repeat;

z-index:-1
}

p { color: #615c49;
}

.indent {text-indent: 1.15em;}


ol {
list-style-type: none;
}

li {	
margin: 3px 0px;
}

a {
text-align: center;
text-decoration: none;
}	 

/* Navigation Links - listed vertically - left column div */	
#leftcolumn h1, h2, h3, h4 {
color: #e7e2c4; 
text-align: center; 
margin-top: .5em;}

#leftcolumn a {
display: block;	
text-align: center;

text-decoration: none;	
margin: 5px 0px;
border: 0px;
padding: 0px 5px;
}	 

#leftcolumn a:link {color: #e7e2c4; margin-left: 5px;}
#leftcolumn a:visited {color: #e7e2c4; font-weight: bold; margin-left: 5px;}
#leftcolumn a:active {color: #842d1b; background-color: #fffff1; font-weight: bold; margin-left: 5px;}
#leftcolumn a:hover {color: #842d1b; font-weight: bold; margin-left: 5px;}

#leftcolumn a.current {
	font-weight: bold; 
	color: #842d1b; 
	line-height: 2em; 
	background-image:url('../images/bkg/bkg_leftCol_current_183x26.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	}


/* Content Area Links */
#rightcolumn a {	
text-align: center;
text-decoration: none;
color: #aa9f4e;	
}
#rightcolumn a:link {color: #aa9f4e;}
#rightcolumn a:visited {color: #aa9f4e;}
#rightcolumn a:active{color: #aa9f4e; background-color: #fffff1; font-weight: bold;}
#rightcolumn a:hover {color: #842d1b; background-color: #fffff1;}



#rightcolumn h1, h2, p, ol, ul, object {
padding: 10px}

#rightcolumn h2 {
color: #aa9f4e;
}

#rightcolumn h3 {
color: #aa9f4e;
text-align: left;
}

#rightcolumn img {margin-left: 10px;}

/* Div is in right column content area */	
#callout li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;	
	color: #615c49; 
	padding: 5px 5px;
	}

	#cast img { 
		padding: 5px 10px;
		}

	#callout img { 
		padding: 5px 10px;
		}

	#callout a {	
		text-align: center;
		text-decoration: none;
		color: #aa9600;	
		}

	#callout a:link {color: #aa9f4e;}
	#callout a:visited {color: #aa9f4e;}
	#callout a:hover {color: #aa9f4e; background: none;}
	#callout a:active{color: #aa9f4e; background: none; font-weight: bold;}


/* Div is in right column content area */	
#ingredients li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;
	text-align: left;
	color: #615c49; 
	padding: 5px 5px;
	}

/* Div is in right column content area */	
#recipe p { 
	font-size: .8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	color: #615c49; 
	padding: 5px 10px;
	}



/* Div is in right column content area - tricks page */	
#notes h3 {color: #615c49;}
#notes ol, ul {
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;
	color: #aa9f4e; 
	text-align: left;
	}

/* Center Freebie Images */
.center {text-align: center;}


/* End rightcolumn div/content */	

/* Footer Links - listed horizontally */

#footer a {color: #e7e2c4;}

#footer a:hover {color: #842d1b; font-weight: bold;}

img {border: 0px}

hr {color: #aa9f4e;
background-color: #aa9f4e;
height: 1px;
margin: 10px  35px 0px 35px;}

Link to comment
Share on other sites
cags Member

cags

Posted
Posted 

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .90em;
color: #aa9f4e;   
background-image:url('images/bkg/BkG_background.jpg');

 

I don't think that url is correct. It certainly doesn't seem to match the other background image used in your CSS. I suspect you wanted '../images/bkg/BkG_background.jpg'.

Link to comment
Share on other sites
Chezshire Regular Member

Chezshire

Posted
  • Author
Posted

Thank you Cags for the suggestion - I've tried it (and restored the url link as you've suggested) but sadly, the background still isn't displaying -- ultimately i want to get the background image to fill the entire screen (height and width - stretching as needed), but first I just need to get it to display. I don't understand why it works on my computer but not when i upload it to the server (nothing changes).

 

Anyhoo - sheet is revised as follows (doesn't work but it's revised)

 

/* Wildcard & Body are in dfs_divs.css */

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .90em;
color: #aa9f4e;	
background-image:url('../images/bkg/BkG_background.jpg');
background-color: #f4c34c;
background-position:center; 
background-repeat: no-repeat;

z-index:-1;
}

p { color: #615c49;
}

.indent {text-indent: 1.15em;}


ol {
list-style-type: none;
}

li {	
margin: 3px 0px;
}

a {
text-align: center;
text-decoration: none;
}	 

/* Navigation Links - listed vertically - left column div */	
#leftcolumn h1, h2, h3, h4 {
color: #e7e2c4; 
text-align: center; 
margin-top: .5em;}

#leftcolumn a {
display: block;	
text-align: center;

text-decoration: none;	
margin: 5px 0px;
border: 0px;
padding: 0px 5px;
}	 

#leftcolumn a:link {color: #e7e2c4; margin-left: 5px;}
#leftcolumn a:visited {color: #e7e2c4; font-weight: bold; margin-left: 5px;}
#leftcolumn a:active {color: #842d1b; background-color: #fffff1; font-weight: bold; margin-left: 5px;}
#leftcolumn a:hover {color: #842d1b; font-weight: bold; margin-left: 5px;}

#leftcolumn a.current {
	font-weight: bold; 
	color: #842d1b; 
	line-height: 2em; 
	background-image:url('../images/bkg/bkg_leftCol_current_183x26.jpg');
	background-repeat:no-repeat;
	background-position:top right;
	}


/* Content Area Links */
#rightcolumn a {	
text-align: center;
text-decoration: none;
color: #aa9f4e;	
}
#rightcolumn a:link {color: #aa9f4e;}
#rightcolumn a:visited {color: #aa9f4e;}
#rightcolumn a:active{color: #aa9f4e; background-color: #fffff1; font-weight: bold;}
#rightcolumn a:hover {color: #842d1b; background-color: #fffff1;}



#rightcolumn h1, h2, p, ol, ul, object {
padding: 10px}

#rightcolumn h2 {
color: #aa9f4e;
}

#rightcolumn h3 {
color: #aa9f4e;
text-align: left;
}

#rightcolumn img {margin-left: 10px;}

/* Div is in right column content area */	
#callout li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;	
	color: #615c49; 
	padding: 5px 5px;
	}

	#cast img { 
		padding: 5px 10px;
		}

	#callout img { 
		padding: 5px 10px;
		}

	#callout a {	
		text-align: center;
		text-decoration: none;
		color: #aa9600;	
		}

	#callout a:link {color: #aa9f4e;}
	#callout a:visited {color: #aa9f4e;}
	#callout a:hover {color: #aa9f4e; background: none;}
	#callout a:active{color: #aa9f4e; background: none; font-weight: bold;}


/* Div is in right column content area */	
#ingredients li { 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;
	text-align: left;
	color: #615c49; 
	padding: 5px 5px;
	}

/* Div is in right column content area */	
#recipe p { 
	font-size: .8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	color: #615c49; 
	padding: 5px 10px;
	}



/* Div is in right column content area - tricks page */	
#notes h3 {color: #615c49;}
#notes ol, ul {
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	font-size: .7em;
	color: #aa9f4e; 
	text-align: left;
	}

/* Center Freebie Images */
.center {text-align: center;}


/* End rightcolumn div/content */	

/* Footer Links - listed horizontally */

#footer a {color: #e7e2c4;}

#footer a:hover {color: #842d1b; font-weight: bold;}

img {border: 0px}

hr {color: #aa9f4e;
background-color: #aa9f4e;
height: 1px;
margin: 10px  35px 0px 35px;}

Link to comment
Share on other sites
Chezshire Regular Member

Chezshire

Posted
  • Author
Posted

Hello FaT3oYCG,

  I was very purposeful in uploading the file, but it seems that I was also very tired and did something dumb cause you hit the nail pretty damn close to the head of why it wasn't displaying. The file is in the right directory, and I named it correctly, BUT i didn't get the camelcasing correct (DUH!)  Thank you both FaT3oYCG and Cags for the help thus far, I'm one step closer to getting my background to show/position as I intend! Thank you very very much!!

 

Now I just need to get the image to but up against the top of the browser window, and to stretch diagonally to 101% of the window so it fills it horizontally but not necessarily vertically. So off to google I go - any suggestions or guideance are appreciated (remember only you can prevent bad designers from doing boneheaded things (like me ;) )

 

Thanks very much for the help tendered thus far!

Happy Holidays

-Chez

Link to comment
Share on other sites
Chezshire Regular Member

Chezshire

Posted
  • Author
Posted

Well we're just 'oh so smart' aren't we ;)

 

Thank you very, very much Cags, the solution on the page you pointed me to worked like a charm and I'm very appreciative of your assistance and help. Thank you very much. I'm now going to tinker and play with this to make sure that I understand why it works and then I'll be progressing on to my final problem which is my faux columns (which worked at one point and then stopped for reasons I don't understand).

 

Anyhoo - thank you very much for helping to solve this issue. Thanks to everyone!

 

-Chez

 

P.S. This places rules and I've been turning all my friends on to it who agree with me that you all rule (thanks so much existing and making the web a better, happier, code-correct place ;) )

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.