CSS BACKGROUND NOT WORKING HELP!!!

[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

Code:

HMTL:

• Home
• About Us
• Gallery
• Media
• God Is Good
• Contact Us

[b] [u] [/u][/b]

 

Welcome to Neva Hurd.com

 

John 3:16 (KJV)

"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."

 

©2009 MSMG ALL RIGHTS RESERVED.
NEVA HURD.COM

Code:

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:

Code:

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

[Author]

Posts