Background picture disappears


unfortunately the background picture disappears, when the screen is getting a smaller width.

See screenshot attached.

You can I achieve, that the display is scaled down in %, so it is shown on smartphone as well?

The best way to achieve this is to have your image set as a background to a ROW, rather than the background of a Bloc. So, instead of adding a hero bloc, complete with it’s navigation, use a standard navigation block in the top global area. Immediately underneath add a standard structure bloc. Add your title, subtitle and button and style as required. With the ROW selected, create a custom class and set your image as the background image as shown below. Be sure to set the Position attribute to right-centre and the Repeat attribute to none. In the same custom class, switch to the metrics tab and adjust the height slider to the required height of your image.

This will pin the image to the right side of the screen when it is reduced in size. However, the image won’t scale as such for different device sizes, but it will keep the right-side of the image in view. Therefore, you may want to adjust the custom class for different devices so it is more accurately sized to suit different devices. You will probably also want to remove any padding from the block containing the image.

1 Like