As a beginner in the world of coding, I apologize for any simple errors in my attempt. Despite researching this issue, I have not been able to find a precise solution that fits my needs.
My goal is to create a full-screen background for the landing page. The landing page should feature a div with title/intro content centered vertically and horizontally. When scrolling down, I want a white div to cover the entire screen width, overlaying the background and causing the title div to move upwards accordingly.
This is the code snippet I have crafted so far:
html,body{
height: 100%;
}
body{
font-family: 'American Typewriter', serif;
font-weight: lighter;
background: url('https://upload.wikimedia.org/wikipedia/commons/8/83/An_old_barn_with_the_Big_Horn_Mountains_in_the_background._Not_far_from_Sheridan,_Wyoming.JPG') no-repeat 50% 50%;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
div.name{
font-size: 100px;
color: #fff;
display: block;
margin: 0 auto;
}
div.container-intro{
height: 100%;
width: 100%;
display: table;
margin: auto;
}
div.container-inner{
text-align: center;
vertical-align: middle;
display: table-cell;
}
a.main-link{
border: 3px solid #fff;
padding: 5px;
color: #fff;
font-size: 20px;
text-decoration: none;
width: fixed;
}
div.big-white{
background-color: #fff;
width: 100%;
margin: auto;
}The "big-white" div is intended to span 100% width and scroll over the background, shifting the initial divs upward. I hope this explanation clarifies the concept better.