Grow your CSS skills. Land your dream job.

[Solved] Background Image

  • # March 2, 2010 at 6:20 am

    i’m trying to make a site and i have a header in place but the pattern continues into a background image that i want to be fixed so when you scroll down the image stays in the same place (i’m fairly new to all this!) i have some code done but i’m firstly not sure whether to do this in html or in css
    here is my html

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Header
    background

    Main Content


    and here is my css

    Code:
    AUTHOR: MR CRISP
    davidcharlescrisp@googlemail.com
    */

    /* RESETS & BASIC PAGE SETUP */
    * { margin: 0; padding: 0; }
    html { overflow-y: scroll; }
    body {
    font: 62.5% Helvetica, sans-serif;
    background: black;

    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a { outline: none; }
    a img { border: none; }
    /* END RESET */

    /* TOOLBOX */
    .floatleft { float: left; }
    .floatright { float: right; }
    .clear { clear: both; }
    /* END TOOLBOX */

    /* STRUCTURE */
    #page-wrap {
    width: 1020px;
    margin: 0 auto;
    }

    ul#nav {

    }
    ul#nav li {
    display: inline;
    }
    ul#nav li a {
    display: block;
    height: 32px;
    text-indent: -9999px;
    float: right;
    }
    ul#nav li.dusthouse a {
    width: 133px;
    background: url(images/nav-dust.jpg) bottom center no-repeat;
    }
    ul#nav li.blog a {
    width: 133px;
    background: url(images/nav-blog.jpg) bottom center no-repeat;
    }
    ul#nav li.portfolio a {
    width: 133px;
    background: url(images/nav-port.jpg) bottom center no-repeat;
    }
    ul#nav li.info a {
    width: 133px;
    background: url(images/nav-info.jpg) bottom center no-repeat;
    }
    ul#nav li a:hover {
    background-position: top center;
    }

    /* END STRUCTURE */

    [attachment=0]Untitled-1.jpg[/attachment]

    # March 2, 2010 at 7:36 am

    worked it out… easy… haha!

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

You must be logged in to reply to this topic.

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