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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -