Display content after a full-screen background image,using CSS

Question

I am trying to display content after(below the image,as we scroll down) a full-screen background image.I have decided to use the 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 is the codepen : Link

What I did in the pen above is that :

.content{
  width:100%;
  background-color:#fff;
  position:absolute;
  top:100%;
  left:0;
  text-align: center;
}

Here is the HTML :

<html>
  <body>
    <header>My title</header>
    <div class="content">My content starts from here</div>
  </body>
</html>

My question is Which is the best way to style the content after(below the image,as we scroll down) the background image ?

Answer 1

use jQuery

var winH = $(window).height();
var winW = $(window).width();
$("body").css("background-size",winH + "px " + winW + "px" );

Display content after a full-screen background image,using CSS

Question

1 answers

solution1
1 ACCPTED 2014-06-19 09:24:39

Display content after a full-screen background image,using CSS

Question

1 answers

solution1 1 ACCPTED 2014-06-19 09:24:39

solution1
1 ACCPTED 2014-06-19 09:24:39