I'm in need of some assistance. Despite my efforts to search and browse forums, I'm unable to find a solution to my problem.
I want to design a landing page with a tall background image that spans 100% width and adjusts to both the browser window and the varying height of the content. The content should be positioned below the browser window boundary, so that only the image is visible initially and users can scroll down to view the content overlaying the bottom part of the extended image.
Here's my current HTML:
<body>
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
</body>
And my CSS:
html,
body {
height:100%;
width:100%;
}
#sectionOne {
height:100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
}
#sectionOneLanding {
height:100%;
width:100%;
}
Currently, the image crops to 100% browser height and the additional content appears over a white background instead of the image extension. I suspect this is because the #sectionOne height is set to 100%, but increasing it only pushes the content further down while still maintaining the white background. Changing Background-Size to 100% had the same result as using cover.
Do you have any suggestions or handy CSS tricks to achieve this effect?
I apologize if this is unclear. Feel free to ask any questions you need clarification on, as it can be difficult to explain.