Cover plugin

Cover any block with background image and manage how it should be shown.

Block cover

Makes cover to fill in full block size maintaining its aspect ratio.

Image cover
When cover is applied on image, it will scale image to fill in full block size maintaining image aspect ratio. This example shows how same image will cover blocks with different size.

Center/focus area

Manage how cover is centered inside the block. By default, cover will be centered at top left corner.

Cover center position
It's possible to specify center position by setting top, bottom, left or right offset in pixels (px) or in percents (%).
For example, by setting left and top to 50%, it will make cover image centered at its center.
Cover center rectangle
Cover center rectangle can be specifiend by setting all coordinates (top, bottom, left and right). When center rectangle is specified, the plugin will try to position cover so this rectangle is in viewport, and centering in the center of the rectangle.
For example, lets put center rectangle on the powerboat.

Cover overflow area

Everything outside of it is tolerated as secondary content, and inside - primary content. Plugin will try to make primary content visible to the user and will neglect the secondary content. By default, overflow area is the whole cover, so all its content is primary

Single side overflow
When single side offset is set, without setting oposite side offset, the overflow area will take all space from it and up to oposite side.
For example, when overflow top offset is set to 300px, overflow area will start at 300px and up to the bottom.
Both sides overflow
When both sides offsets is set, the overflow area will take all space between it.
In example, overflow top offset is set to 300px and bottom to 200px.
Overflow rectangle
When all sides offsets is set, the overflow rectangle will take all space between it.
In example, overflow left offset is set to 600px, right to 80px, top to 300px and bottom to 200px.
Overflow + center rectangle
When overflow rectangle is set together with center rectangle, it will show it's most potential. It's best when center rectangle is within overflow rectangle.
For example, lets take same overflow rectangle and centering rectangle same as on Center/focus area section, i.e. make it center on powerboat.