html - Display content after a full-screen background image,using CSS -
html - Display content after a full-screen background image,using CSS -
i trying display content after(below image,as scroll down) full-screen background image.i have decided utilize css3 technique :
body{ background: url('images/body-bg.jpg') no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
here codepen : link
what did in pen above :
.content{ width:100%; background-color:#fff; position:absolute; top:100%; left:0; text-align: center; }
here html :
<html> <body> <header>my title</header> <div class="content">my content starts here</div> </body> </html>
my question best way style content after(below image,as scroll down) background image ?
use jquery
var winh = $(window).height(); var winw = $(window).width(); $("body").css("background-size",winh + "px " + winw + "px" );
html css css3 background-image
Comments
Post a Comment