html - How do I align the 2 stacked elements using the same background image so it looks like one image? -
the header of website's homepage consists of following layout:
<header> <div class="navbar-lock"></div> <div class="hero"></div> </header>
where div.navbar-lock
fixed navigation initial height of 90px, , div.hero
contains header text. visually, want give appearance 1 background image (2000px x 481px) spans height , width of both. on scroll, fixed navbar's background top 90px of image; when scroll position @ top of page, header once again appears 1 background image.
what i've tried:
approach 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%; }
approach b (crop image 2):
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 position text }
but in both attempts, unable image(s) line properly. missing here?
i put header , hero div's parent div. , put image onto parent div.
Comments
Post a Comment