How to make full screen image

How would I go about making a full screen image that would be responsive to every device? I want to create a landing page with one picture that is full screen and doesn’t scroll. Just wondered if that was possible.

Hey Jason,

Thanks for getting in touch! It is possible, albeit not perfectly and a bit tricky, but you’d have to use 2 images, or possibly more, if you want full responsiveness. Reason for this being different devices have different aspect ratios. If we force a 1920x1080 image to fit in a mobile device in portrait mode, it would look stretched so you’ll want a different image be seen on mobile devices. Unless the image is just a pattern or at least most of it is so you’ll have to play around with it as well.

To achieve this using the BB theme, you’ll want to use the No Header/Footer layout. Just simply insert your image for large/medium devices using the Photo module and be sure the row settings are set to full width for both and zero out the margins/paddings. Under the Advanced tab on the module, you can set it to display on Large & Medium Devices Only. Insert another Photo module and this time place your image intended for Small devices and set it to display on Small Device Only and that’s it!

Depending on the image you are using, you can use custom CSS to make sure it fits the entire viewport using the vh unit. More of that here.

Hope this makes sense :slight_smile:

Ben