Header image 100% browser height

Hi,

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.
http://imgur.com/HiuwH9u
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.

Ben

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:

Ben