Grow your CSS skills. Land your dream job.

CSS BACKGROUND NOT WORKING HELP!!!

  • # June 8, 2009 at 12:22 am

    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:

    [b] [u] Large Brackground[/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."

     

    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;
    }

    # June 8, 2009 at 12:57 am

    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.

    # June 8, 2009 at 4:49 pm

    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

    # June 9, 2009 at 1:58 am

    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
    }
    # June 9, 2009 at 3:22 pm

    Thanks, 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

    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/

    # June 9, 2009 at 6:07 pm

    Ah yes, try:

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

    # June 12, 2009 at 2:43 pm

    Thanks!! so much

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".