Image - browser height

I Need Help
1

Is it possible to set an image to take up a certain percentage of the browser height?

2

Yes, But depends on what you’re doing for how you would approach it. Also you have to consider how you want that to be handled on multiple breakpoints (screen sizes, especially mobile).

In short, details of what you want to achieve would be helpful.

3

For the background/header image on mobile, I would like it to fill 100% height of the browser. So, regardless of the device or resolution, the entire mobile screen with have the full background image.

Thanks!

4

Can’t you just use a hero bloc with an image background for that set to full height?

5

Hi @Flashman, so are you saying disregard the global header and footers and just have the content area with an image at full size?
Also, I’m a bit unsure as to how you can make that stretch to a full browser height. Any thoughts?
Thanks

6

This can be varied according to need. If it’s global it will obviously be replicated elsewhere but you can turn global areas on and off for each page. You could certainly do this without relying on global areas at all if you wished. A hero bloc can be used anywhere and in theory you also make use of background images with the style set to fill and padding at full screen. I think there are various ways this could be achieved.

7

If you do do this, you really need to be aware that the aspect ration is going to change between portrait and landscape, as well as devices having differrent screen ratios. You need plenty of spare space at the side to prevent the subject being cut off or empty sidebars being visible.

It’s often better to use different images ( or different crops ) to suit the format.

8

You can use a hero bloc and make use of custom classes to set up different images for each breakpoint. On desktop an image of say 2500px by 1500px should suffice, then on mobile perhaps 1000px by 1000px.

This is all approximate and depends to a large extent on the chosen image. It will require a bit of testing. It’s a good rule of thumb to choose images with plenty of space at the sides.

1 Like