block Backgrounds, heros and Effects

This tutorial will walk you through all of the different background options you have with a block to create great hero's or other effects for your site including how to do parallax and ken burns effects.

Cover

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.

Cover

Block Height: 300px, Vertical Align: Middle, Background Display: Cover, Background Position: Center Top
And here we changed the background position to be left bottom to always show the mountain and trees and crop the sky and right side of the image.

Cover

Block Height: 300px, Vertical Align: Middle, Background Display: Cover, Background Position: Left Bottom

Contain

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.

Contain

The contain option works best with images that have transparent backgrounds or images with a solid color edge to blend with your block's background color

Contain

This image has all black edges so it blends into the block's black background and will look fine on all devices and aspect ratios.

Patterns

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

Repeating Pattern

Background Display: Auto, Background Repeat: Repeat

Ken Burns

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.

Ken Burns

Background Display: Cover, Background Position: Center Center, Media Effect: Ken Burns 60 seconds 1.8x zoom. Refresh to repeat.

Parallax

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.

Parallax

Scroll up and down to see the parallax effect on this block.
Background Display: Cover, Position: Center Center, Parallax: 70%

background Layer Color

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.

Background Layer Color

We set the background layer color to a 50% transparent orange color to demonstrate this feature.

Still have questions?

Let's Chat