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.
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.
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.