Problems with behavior of vh-100

Webdesign Help
1

My goal is to put a semi-transparent gradient over a background image. Currently it looks like this for me:
https://codepen.io/rumede/pen/OJgBVRV

I have the following two problems, but can’t find a solution for them:

The background image starts directly under the navigation, since the height is set to vh100, it is too high in height exactly by the height of the navigation. How can I correct this? Preferably a solution that also works for a navigation with a different height. The solution may well be with SCSS.

The history starts at the top, covers the navigation. But this should start at the height of the image and take exactly the height of the image. Currently it is exactly shifted by the navigation height.

Can anyone tell me the solution here? Best probably by means of SCSS and a calc function?

2

What about set the navbar to “fixed-top”? Another solution would be to set it to “position-absolute w-100”.

3

unforunately it doesnt work.

4

@rumede

You can try with this

HTML

<header class="d-flex justify-content-center">
	<div class="container-fluid text-center d-flex justify-content-center align-items-center semiGrad">
		<div class="row">
			<div class="col">
				<h1>Vertically Centered Masthead Content in Section</h1>
				<p class="lead">A great starter layout for a landing page</p>
			</div>
		</div>
	</div>
</header>

CSS

header {
  background: url("https://source.unsplash.com/BtbjCFUvBXs/1920x1080");
  background-size: cover;
  height: 500px;
}

.semiGrad {
  background: linear-gradient(rgba(13,110,253,0.04), rgba(13,110,253,0.6));
}
6

here is an example

1 Like
7

kuligaposten’s way is spot on. :smiley:

8

It works… Wow. But the heigt of the header is now 500px. I would, that the header is 100vh, that means, that the picture takes the hole brower-window height, less then the height of the navbar.

And how is the solution for a second version. Wenn the pictures in vh100 and the navigation is without background in this picture, positioned on top?

9

change the height to 100vh

header {
  background: url("https://source.unsplash.com/BtbjCFUvBXs/1920x1080");
  background-size: cover;
  height: 100vh;
}

.semiGrad {
  background: linear-gradient(rgba(13,110,253,0.04), rgba(13,110,253,0.6));
}
10

When i set the height to 100vh, then te result is this:

the bottom edge of the image is not exactly on the bottom edge of the browser window, but exactly around the height of the navbar in addition. so when i scroll down, there is still some of the image first and only then the text.

11

on header:

height: calc(100vh - 56px);

12

https://masthead.bss.design/

13

@kuligaposten Sorry, i cant open your File. Can you put the file masthead.bss.design once again?