[Resolved] Elements behaviour

[Petri]

Hi support,
On my pages I have 2 elements with both a background image (photo).
1. Block – Page hero (large header bg photo)
2. Block – Hook – before_footer (same bg photo but only the lower part of the photo, 300 px height)

In this way I want to give the impression that there is 1 large and tall (high) background photo, throughout the page.
The strange thing is that the before_footer photo behaves differently, when I scale the page this photo seems to zoom in, so they don’t ‘match’ any longer. The max-width etc. is the same.
Can you tell me how to make them look the same on all devices? Thanks

[David]

Hi there,

thats really tricky to do.
The issue is related to Aspect Ratio.
The ratio of the image is different to the Container Block it is applied to.

If you want an image to scale proportionally on all screen sizes then a) it needs to be full width and b) its height must match the images aspect ration, using the Minimum Height and vw ( viewport width ) values.

Alternatively:
Use one Container Block with no Padding, to add your background image.
Then inside that Block add 3 more container blocks, one for the grid, one for the full width bar, and one for the footer image area. You can then control the spacing as you need.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Petri]

Hi David,
Will give it a try, thanks!

[David]

Let us know how you get on 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts