Basically I have two divs, one with a background of a an image of house on snow and the second a plain white background.Each div will take up 100% width and height of the page.
The aim, is so that when scrolling it will have an almost natural fade from the snow in the image to the white background. Unfortunately the image cuts off at the house before the snow properly starts. How can I make the background fit so that it will blend well with the white? Here's the html:
<!DOCTYPE html5>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div class="sec" id="one">
<h1>hi</h1>
</div>
<div class="sec" id="two">
<h2>Hello</h2>
</div>
</body>
</html>
Here's the CSS:
html,body{
margin: 0 auto;
height:100%;
width: 100%;
}
.sec{
height: 100%;
width:100%;
}
#one{
background: url(images/white_back.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#two{
background: white;
}
and finally the link the background image for the first div: http://imgur.com/a/ytDul
I know this may be an unorthodox question but any help will be appreciated.