Forums

rssatnam

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:

<html>
<head>
<style type="text/css">
html{
  background:#77d5fb url('bottom_bg.jpg') bottom center no-repeat;
  height:100%;
}
body{
  background:transparent url('top_bg.png') top center no-repeat;
  height:100%;
  width:100%;
  margin:0 0;
}
#container{
  width:900px;
  margin:0 auto;
}
#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;
}
</style>
</head>

<body>
    <div id="container">
      <div id="lt-corner"></div>
      <div id="lb-corner"></div>
        <div id="navBar">
            <ul id="menu">
                <li><a href="#">&#10029; Home</a></li>
                <li><a href="#">&#10029; About</a></li>
                <li><a href="#">&#10029; Services</a></li>
                <li><a href="#">&#10029; Contact</a></li>
            </ul>
        </div>
        <div id="rt-corner"></div>
      <div id="rb-corner"></div>
    </div>    
</body>
</html>

Ketan

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

Ketan

And below is the HTML :

Thanks KD

treehouse : what would you like to learn today?

Forums

[Solved] Background-Position on HTML tag not working