Grow your CSS skills. Land your dream job.

[Solved] Background Attachment Won’t Fix

  • # March 5, 2011 at 3:47 pm

    Okay, so the title says it all. I have my background centered in the middle of the page, but I need it to stay fixed in order to add navigation, unless anyone has a better idea for my navigation problems. My website: http://victoriacarol.com

    and here’s what i have going on:


    html {width:100%;
    height:100%;
    background-image:url('images/contentbg.png') ;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:#d4e6e9;}


    @font-face {font-family:slabtallb;
    src: url('slabtallb.ttf');}

    #navbar {font-family:slabtallb;
    width:730px;
    height:35px;
    position:fixed;
    top:110px;
    left:200px;
    letter-spacing:2px;
    font-size:12px;}

    #navbar li {float:left;
    padding:25px;
    list-style-type:none;
    text-shadow: 0px 1px 2px #fff;}

    #navbar li a, a:visited {text-decoration:none;
    color:#a2b398;}

    #navbar li a:hover{text-decoration:none;
    color:#809076;}

    Thanks!

    # March 5, 2011 at 4:42 pm

    for anyone with similar problems, make a wrapper div and center it with the background like so:


    html {width:100%;
    height:100%;
    background-image:url('images/contentbg.png') ;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:center center;
    background-color:#d4e6e9;}


    @font-face {font-family:slabtallb;
    src: url('slabtallb.ttf');}


    #wrapper {width:730px;
    height:606px;
    border:1px solid #000;
    position:absolute;
    margin:0 auto;
    top: 50%;
    left: 50%;
    margin-left: -365px;
    margin-top: -303px;}

    #navbar {font-family:slabtallb;
    width:730px;
    height:35px;
    position:absolute;
    display:inline;
    letter-spacing:2px;
    font-size:12px;
    left:105px;
    top:130px;}

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