Header image 100% browser height


What I am trying to accomplish is to create a 100% width 100% height background image in the top of my page. I used the ‘Scroller’ BB template to work from.

There is a few problems with this:
The image is set at background of the row but I am only able to set margin and padding in px.
So when it is 100% height on my screen it is way to tall on others; and vise versa.

Futhermore, if I have elements inside that row like headers and images. Their position in relative to the row height not the screen.

In my case I would like the image of the top row to take up 100% of the viewport height and width.
Have a header centered in the middle of the viewport.
Have an image centered at the bottom of the row.
All content below should be as normal.

I saw another person post this question, but because of lag in response it was closed.

[Content Hidden]

So what I have done now is add a empty class to the row, then targetting the row background through a nested rule with height: 100vh;

I don’t know how good it is to use vh as a unit but it seems to work. It still leaves out the other content of the row

Hello Johan,

Sorry I’m having problems understanding what you’re trying to do so I did a quick mockup of what I understood. Please refer to the screenshot.
Is that what you’re trying to create? By the way, you can set the row background image’s scale to fit and it should occupy the whole 100% of width and height.


hi Ben,

I apologize if I was not clear.

Take a look at wetransfer.com or www.apple.com/osx/.

I am trying to make a 100% wide 100% tall header image (relative to viewport size)

If you take a look at my site you can see where i’m at in the proccess

I am pretty much done with it now, and I hope that the unit vh will hold.

Maybe a template that can do just that is a good feature for a BB template?

Hey Johan,

I see what you mean. You can just set a top and bottom padding to your content so they stay at the middle. Setting the scale to fit for the background image will always make the it go 100% of the row so if you make your row full width then it should go 100% width relative to the viewport. Regarding 100% height, it would solely depend on your content or you might want to set a height attribute to your row.

Anyway, glad you got it working. Regarding making a template for that, feel free to submit that to our User Voice Forums! Any idea is welcome there. :slight_smile: