I want to do something like on the screenshot:
The image should not be defined as a class or source in the background, but as an image with tag.
The image should be behind the navigation and the statement
The image should be 100vh and 100vw, so fill browser window
The navigation should be aligned to the top of the image
The statement should be centered horizontally and vertically in the image as a paragraph.
I can’t get it to work, can anyone here help at all?
The problem with this is that it will distort on mobiles
It is possible, probably wrapping it all in a div with position-relative and then all the child component using position-absolute.
The bootstap docs on position might help you
You only need two css classes
.header-item > img {
height: 100vh;
width: 100vw;
object-fit: cover;
object-position: center;
}
.header-text {
position: absolute;
}
The HTML markup you have in the example below
resize the window and you will see the image looks good at all sizes
good luck
Wow, cool, many many thanks… @kuligaposten
Is it possible to make the navigation not scrolling with? With .sticked-top de image will rendered under the navigation.
Is it possible to send me the bs-studio-file rumede.bss.design?
That would interest me too.
You can easily do it on the BSS built-in agency template
add this CSS
CSS
header img {
height: 100vh;
width: 100vw;
object-fit: cover;
object-position: center;
}
edit the header so it looks like this
HTML
<header>
<div class="d-flex flex-column justify-content-center align-items-center position-relative">
<img src="YOUR-IMAGE">
<div class="d-flex flex-column justify-content-center align-items-center position-absolute">
<div class="p-4">
<span class="text-center text-light display-5">Welcome To Our Studio!</span>
</div>
<div class="text-uppercase pb-4">
<span class="text-center text-light">It's Nice To Meet You</span>
</div>
<a class="btn btn-primary btn-lg text-uppercase" role="button" href="#services">Tell me more</a>
</div>
</div>
</header>
live example
Thanks for your reply.
sorry i can’t get it to work… I actually want the following…
The enclosing div to full window height and width.
In it then the following elements:
So actually exactly your example, except that the navigation should not be a navigation that scrolls, but simply a second DIV with content in it.