html - Stick image to the top of footer in Bootstrap 3 -
i want put image on top of footer, image lying somewhere in middle of screen. have tried vertical-align, wokaround using margin, no success yet.
here's jsfiddle
here's html structure,
<body id="extranav"> <div class="wrapper"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php"><img src="images/logo.png" ></a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.php">home</a></li> <li><a href="link1.php">link1</a></li> <li><a href="link2.php">link2</a></li> <li><a href="faq.php">faq</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="col-sm-6"> </div> <div class="col-sm-6"> </div> </div> </div> <div class="push"></div> </div> <div class="footer"> <br><br> <div class="text-center"> <a href="#" class="fa icon fa-facebook fa-lg"></a> <a href="#" class="fa icon fa-twitter fa-lg" ></a> <a href="#" class="fa icon fa-google fa-lg"></a> <br><br> <div class="footer-links"> <a href="feedback.php">feedback</a> <a href="about-us.php">aboutus</a> <a href="faq.php">faq</a> <p>© rights reserved</p> </div> </div> </div> </body> and css
html,body { height: 100%; /*font-size: 15pt;*/ font-family: 'varela round', sans-serif; background-color: #fff; min-height: 1024px; } .footer { background-color: #2d3339; color: white; } .footer { line-height: 2.8em; } .footer-links a,.footer-links p { color: #aaa; text-align: center; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -200px; } .footer, .push { height: 200px; font-size: 15px; } .push { background: url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom transparent; }
why don't put footer image div directly inside footer? naturally fall right above footer way, need adjust css footer 400px tall(200px image , 200px footer section below image):
.footer { height:400px; font-size: 15px; background-color:#2d3339; color:white; } .push { height:200px; background:url("http://i564.photobucket.com/albums/ss86/ban0107/aya/footer.gif") repeat-x scroll center bottom; }
Comments
Post a Comment