Forums

olive21

Hello

I need help with adding a background in the middle of the header & footer. The background should be only in the center also seen the site.psd image attached. Since I added the image (background floor) it had distored my website seen on current-site jpg, also attached. What am I doing wrong??? I would like the floor background to be strictly in that area and expand depending on the browser. CAN YOU HELP PLEASE. THANKS

HMTL:
	<title>NEVA HURD COM</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
</head>

<body>
	<div id=\"page-wrap\">
	
	  <ul id=\"nav\">
			<li><a href=\"index.html\">Home</a></li>
			<li><a href=\"about.html\">About Us</a></li>
			<li><a href=\"gallery.html\">Gallery</a></li>
			<li><a href=\"media.html\">Media</a></li>
            <li><a href=\"godis.html\">God Is Good</a></li>
			<li><a href=\"contact.html\">Contact Us</a></li>
		</ul>
        
      
		
	  <div id=\"main-content\">
[b] [u]     <img id=\"background\" src=\"images/black-floor.jpg\" alt=\"Large Brackground\" name=\"background\" style=\"width:1680px\" height=\"1050\"/>[/u][/b]
			
			<div id=\"left-col\">
							
				<h1>&nbsp;</h1>
				<h1>Welcome to Neva Hurd.com</h1>
						
			  <p>&nbsp;</p>
		  </div> <!-- END left-col -->
			
			<div id=\"right-col\">
			  <h2>John 3:16 (KJV)</h2>
				
				<p>&quot;For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.&quot;</p>
				<p>&nbsp;</p>
				<meta name=\"keywords\" content=\"Nevahurd.com, Christian Hip Hop, Ryan Hip Hop Rapper, Toronto Musician, God is Good\" />
			</div>
			
			<div class=\"clear\"></div>
		
	</div> 
		<!-- END main-content -->
	
	</div> <!-- END page-wrap -->
	
	<div id=\"footer\">
		<p>&copy;2009 MSMG ALL RIGHTS RESERVED. <br />
		  NEVA HURD.COM
	  <p>
	</div>
	
</body>

</html>

CSS: 

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Helvetica, sans-serif;
	background: url(images/body-bg.png) repeat-x top #ffffff;;
}

p {
	font-size: 1.3em;
	line-height: 1.4em;
	margin-bottom: 0.8em;
}

a { color: #540000; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

h1 { font-size: 3.0em; margin-bottom: 0.8em; }
h2 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 0.8em; }
h3 {
	font-size: 1.6em;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: 2px;
	background: #e9bc3d;
	color: #5e0d04;
	padding: 5px;
	margin-bottom: 0.5em;
	text-align: center;
}

.clear { clear: both; }

div#page-wrap {
	width:800px;
	margin: 0 auto;
}

ul#nav {
	height: 200px;
	background: url(images/header-bg.jpg) no-repeat;
	list-style: none;
	padding-left: 115px;
	}
	ul#nav li {
		display: inline;
		font-size: 1.3em;
	}
	ul#nav li a {
		display: block;
		width: 113px;
		float: left;
		margin-top: 168px;
		color: white;
		padding-top: 2px;
		font-weight: bold;
		text-decoration: none;
		}
		ul#nav li a:hover, ul#nav li a:active {
			color: yellow;
			}
[b]	#background
{
width: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}[/b]
	div#main-content {
		padding-bottom: 60px;
		}
		div#main-content div#left-col {
			float: left;
			width: 510px;
		}
		div#main-content div#left-col div#quick-jumps {
			width: 200px;
			float: left;
			margin-right: 15px;
			background: url(images/remote.jpg) bottom center no-repeat;
			padding-bottom: 110px;
			}
			div#main-content div#left-col div#quick-jumps p {
				text-transform: uppercase;
				font-weight: bold;
				letter-spacing: 1px;
				}
				div#main-content div#left-col div#quick-jumps p span {
					color: #e9bc3d;
				}
			div#main-content div#left-col div#quick-jumps a {
				color: black;
			}
		div#main-content div#right-col {
			float: right;
			width: 260px;
			border-top: 8px solid #b1b4bb;
			padding-top: 15px;
			}	
			div#main-content div#right-col p {
				font-size: 1.1em;
			}
	div#footer {
		background: #3d3d3d;
		color: white;
		padding: 10px 0 10px 0;
		text-transform: uppercase;
		border-top: 1px solid grey;
		text-align: center;
	}

TheDoc

You should have a background as an <img /> tag, that's NOT a CSS background, that's just an image.

You need to apply the background using CSS.

If you don't know what I'm talking about, you need to go back to the basics of wherever you were learning from.

olive21

Thanks, can some show me a sample code. That's the only thing I just havn't gotten right. So how do I apply into css which I have placed incorrectly. Please help

TheDoc

You need to apply the background to something.

I think you want it to apply to the body, though I'm not 100% sure on your question. So the CSS for your body would look something like:

body {
    background: url(images/black-floor.jpg) top center repeat-y;
    font-size:62.5%;
    etc etc
}

olive21

Thanks, I have tried its not working. The background does not show up at all after a I placed the code. Any other suggestions????

apostrophe

There is nothing wrong with The Doc's code. Where are you putting it? Is the path to the image correct relative to the css file? Should it be on the body or attached to a specific div?
I suggest you watch the beginners video http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

TheDoc

Ah yes, try:

background: url(../images/black-floor.jpg) top center repeat-y;

olive21

Thanks!! so much

treehouse : what would you like to learn today?

Forums

CSS BACKGROUND NOT WORKING HELP!!!