Landing page with fixed aspect ratio

  • 5 August 2015
  • 5 replies
  • 25 views
M

I would like to create a fullscreen landing page with an image (1920x1280px) 
The image should stretch throughout the whole page. Therefore I would like to use the CSS property “Background-size: cover” but still if I resize the browser window to a smaller screen size at a certain point the background image does not scale anymore but there is a blank bar appearing at the bottom.

My question: how can I make sure that my Image always fills the full browser window?

5 replies

Stuart_Mitchell

Hi Mattis,

Could you let me know what browser this happens in and do you have an example page that your working on so I can see it happening?

Thanks

Stuart.

M

Hey Stuart,

I am working with Chrome for Mac

I would like to create a page like this one: http://www.watchever.de/landing/watchevercom
the current state is this one: http://landing.watchever.de/watchevercom/

Thank you

J

Hey Mattis, 
I took a dive into your page, and it looks like you’re using some CSS that actually doesn’t need to be added. If you simply choose ‘Stretch Background to Page Edges’ and ‘Fit Background to Container’ then that should cover you just fine. I created another variant in your page named **[Community Test Variant] No CSS Needed **if you want to take a look and test it out. 

If you’re trying to recreate the fixed footer at the bottom, you can simply follow the steps listed here to achieve that. All in all, you should be able to recreate that entire page super easily. 

M

ok cool I figured it out… Thank you guys!
and by the way the sticke footer/header is awesome shit!

J

Haha, awesome! I’ll pass that feedback on to Johnny, the guru who created it. 

Reply


Terms & ConditionsCookie settings