The layout of the header on my website's homepage is as follows:
<header>
<div class="navbar-lock"></div>
<div class="hero"></div>
</header>
In this setup, div.navbar-lock represents a fixed navigation bar with a height of 90px, while div.hero contains header text. The goal is to visually create the effect of a single background image (2000px x 481px) spanning across both elements. When scrolling, the navbar's background should display the top 90px of the image, seamlessly transitioning back to one cohesive image at the top of the page.
My attempted solutions have been:
Strategy A:
header {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
min-height: 90px;
padding-top: 20px;
position: fixed;
top: 0;
z-index: 100;
width: 100%;
}
Strategy B (splitting the image into two):
div.navbar-lock {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
background-size: cover;
}
div.hero {
background: #F60 url(../images/header_bg.jpg) no-repeat 0 -90px;
background-size: cover;
position: relative;
top: 90px;
padding: 80px 0 134px; // padding for proper text alignment
}
However, I encountered difficulties in aligning the images properly in both approaches. What steps might I be overlooking here?