Grow your CSS skills. Land your dream job.

Background-Position on HTML tag not working

  • # December 11, 2012 at 2:46 pm

    I’m following one tutorial on webdesign tutsplus, Final Page: http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/demo_css_ribbon.html

    I’ve completed everything but one problem is coming in html styling, you can see I’ve included height:100% , but in original tutorial there was not that line, if I remove that line then it’s collapsing, but in original tutorial it’s perfect, why so?

    And also right now I’ve done height:100% then you can scroll at bottom and can see there’s a margin left off at bottom, I want that image to stick at the very bottom of the page.

    Please download image also so that you can try this code, here are the links of images:

    http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/bottom_bg.jpg

    http://webdesigntutsplus.s3.amazonaws.com/126_RibbonNavTutorial/code/top_bg.png

    **CodePen** = http://codepen.io/joe/full/xruKk

    **jsFiddle** = http://jsfiddle.net/rssatnam/YekQe/embedded/result/

    Code:



    # December 17, 2012 at 8:40 am

    Hi Satnam,

    Below is the revised code use this one its work fine for me.

    CSS :



    html{
    background:#77d5fb url(bottom_bg.jpg) bottom center no-repeat;
    height:100%;
    }
    body{

    background:#77d5fb url(bottom_bg.jpg) bottom center no-repeat;
    height:100%;
    width:100%;
    margin:0 0;
    }
    #wrapper { width:100%; height:auto; margin:0px; padding:0px; float:left; background:transparent url(top_bg.png) top center no-repeat; }
    #container{
    width:900px;
    margin:0 auto; height:auto; padding:0px;
    }
    #navBar{
    height:62px;
    background-color:#e5592e;
    margin:3em 0;
    position:relative;
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    -o-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
    border-radius:3px;
    z-index:500;
    }
    #menu li{
    list-style-type:none;
    display:block;
    float:left;
    margin:1em 0.8em;
    }
    #menu li a{
    display:block;
    text-decoration:none;
    color:#F0F0F0;
    font-size:1.6em;
    margin:0;
    line-height:28px;
    text-shadow:0 2px 1px rgba(0, 0,0, 0.5);
    }
    #menu li a:hover{
    /*transition:margin-top 0.3s;
    -webkit-transition:margin-top 0.3s;*/
    margin-top:2px;
    }
    #lt-corner{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:#d9542b transparent transparent;
    position:relative;
    float:left;
    top:1px;
    left:-50px;
    }
    #lb-corner{
    border:50px solid;
    border-color:transparent transparent #d9542b;
    width:0px;
    height:0px;
    position:relative;
    float:left;
    top:-40px;
    left:-150px;
    }
    #rt-corner{
    width:0px;
    height:0px;
    border:50px solid;
    border-color:#d9542b transparent transparent;
    position:relative;
    float:right;
    top:-107px;
    right:-45px;
    }
    #rb-corner{
    border:50px solid;
    border-color:transparent transparent #d9542b;
    width:0px;
    height:0px;
    position:relative;
    float:right;
    top:-149px;
    right:-145px;
    }

    # December 17, 2012 at 8:46 am

    And below is the HTML :






    Thanks
    KD

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

You must be logged in to reply to this topic.

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