Jump to content

Using Css To Display Bg Img


Recommended Posts

I'm creating a webpage/site that uses CSS to create templates where end-users can choose themes. I just can't seem to get the bg image to appear. What am I doing wrong?Here's what I've got...Thanks,Adam
cause you are now refferig to an image at the location "http://www.frartexchange.com/pennie/pennie/images/bg.jpg" which is no image.

change your path to the above.

Link to comment
Share on other sites

It's still not showing up. I'm calling the image from the right place. I am able to change the bg color in the same selector (body). I validated and repaired both the .html and the .css with no errors (admittedly, there were a few.)The .css

body {background: #d2e6cd url('/images/bg.jpg') repeat-y fixed center;margin:10px 10px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */text-align:center; /* Hack for IE5/Win */}div.content {width:620px;margin:0px auto; /* Right and left margin widths set to "auto" */text-align:left; /* Counteract to IE5/Win Hack */margin:0 auto;float:left;}div.thumb { position:relative; left:80%; top:0px; vertical-align: middle; float: left;}img.menu1{ position:absolute; left:0px; top:91px; vertical-align: middle; float: left;}img.menu2{ position:absolute; left:0px; top:107px; vertical-align: middle; float: left;}img.menu3{ position:absolute; left:0px; top:123px; vertical-align: middle; float: left;}img.menu4{ position:absolute; left:0px; top:139px; vertical-align: middle; float: left;}img.menu5{ position:absolute; left:0px; top:155px; vertical-align: middle; float: left;}a {	text-decoration: none;	color: #000;	font-weight:bold;	outline:none!important;}a:hover {	outline:none!important;}h1 {	margin:0;	padding:0;}h2 {	margin:0;	padding:0;	font-size:20px;	font-weight:bold;}h3 {	margin:0;	padding:7px;	font-size:16px;	font-weight:bold;	text-align:left;}#top {	text-align:center;	height:10px;	margin:0px;	padding:0px;}#main {	text-align:center;	margin:0px;	padding:0px;}#bottom {	text-align:center;	height:10px;	margin:0px;	padding:0px;}#content {	}img {	border:none;}ul {	border:0;	margin:0;	padding:0;	white-space:nowrap;}#wrapper {	width:100%;	text-align:center;	margin-top:0px;	border-spacing:0;	border-collapse:collapse;	border-style:none;	border-width:0;}

The .html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> <link rel="shortcut icon" href="images/pennie.ico" type="image/x-icon" /><link rel="stylesheet"  type="text/css" href="CSS/pennie_green_4.css" /> <title>pennie hair salon</title></head><body><div class="content">	<div id="wrapper">		<div class="thumb">			<img src="images/header_ps.jpg" alt="header" />				<img class="menu1" src="images/home_off.jpg" alt="home" /> 				<img class="menu2" src="images/about_us_off.jpg" alt="about us" />				<img class="menu3" src="images/profile_off.jpg" alt="profile" />				<img class="menu4" src="images/appointments_off.jpg" alt="appointments" />				<img class="menu5" src="images/photos_off.jpg" alt="photos" />		</div>	</div></div></body> </html>

I included the whole file, in case it had something to do with either the body or div.content selector.Thanks for your help.Adam

Edited by bigsilk
Link to comment
Share on other sites

Try applying the background image to both the <html> and <body> elements.By the way, your site is badly positioned in Firefox, you really should look at it.Edit: Actually, it appears that way in all browsers for me. Your site seems to be offset far towards the right side of the screen. It gives me a horizontal scrollbar.

Edited by Ingolme
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

  • Create New...