block Backgrounds, heros and Effects

In this example we set the block height to 300px and the vertical alignment to the middle in the block settings. We also chose a block style with the font color set to white to be the correct color over the dark image. Using the "Cover" setting for "Background Display" we ensure that the chosen image covers the entire block and none of the block's background is visible. Depending on the aspect ratio of your image and of the block itself the image will be cropped. To have some control over which part of the image gets cropped you can use the "background position" option to set which part of the image gets anchored leaving the rest to be cropped. If you want to control the crop yourself you can add your own image for different device widths.

When you choose "contain" as the background display option the image will fit the block without cropping the image at all. Depending on the aspect ratio of your image and the aspect ratio of the block the image will not always cover the entire block. This does not work well with photos unless they have a solid color edge to blend with.

When you use a pattern you will likely want your pattern to not be contain or cover but to repeat on the block.

The Ken Burns effect slowly zooms on your image in order to provide a feeling of motion. Using this effect with the right photo will give motion and attention to your blocks without the additional bandwidth and processing power required by video. This effect also works on mobile devices where autoplaying videos does not.

The parallax effect will give the feeling of the background image scrolling at a different speed than the page itself is scrolling. You can change the setting to provide a more subtle or obvious effect.

You can use the block layer color to darken or add color over a background image. Use the alpha transparency option when setting the color unless you want to completely cover the background image with a solid color.