- This topic is empty.
-
AuthorPosts
-
June 8, 2009 at 12:22 am #25076olive21Member
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:
NEVA HURD COM [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.COMCode: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;
}June 8, 2009 at 12:57 am #58699TheDocMemberYou 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.
June 8, 2009 at 4:49 pm #58709olive21MemberThanks, 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
June 9, 2009 at 1:58 am #58803TheDocMemberYou 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
}June 9, 2009 at 3:22 pm #58853olive21MemberThanks, I have tried its not working. The background does not show up at all after a I placed the code. Any other suggestions????
June 9, 2009 at 3:58 pm #58845apostropheParticipantThere 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/June 9, 2009 at 6:07 pm #58856TheDocMemberAh yes, try:
background: url(../images/black-floor.jpg) top center repeat-y;
June 12, 2009 at 2:43 pm #59032olive21MemberThanks!! so much
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.