Help with create a Comibnation of picture and Navigation

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

1 Like

That would interest me too.

You can easily do it on the BSS built-in agency template

add this CSS

header img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  object-position: center;

edit the header so it looks like this

<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 class="text-uppercase pb-4">
				<span class="text-center text-light">It's Nice To Meet You</span>
			<a class="btn btn-primary btn-lg text-uppercase" role="button" href="#services">Tell me more</a>

live example

1 Like


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:

  • An image which also goes to Full window height and width.
  • a div with content, which is placed on top of the enclosing div
  • a div with content which is centered in the height of the enclosing div

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.


@kuligaposten Can it be, that the preview link is expired?

I only see: We can’t find this file.