Cover is the first thing people see on your page. It introduces the content and prompts them to go for it or sums up what makes your project unique. A cover usually contains a background image: a stylish photo, compelling video, color, gradient, or texture.

Here are a few tips that will help you work with covers, backgrounds, and videos more efficiently.
Viewable Area
Unlike magazine pages, website pages have no fixed viewable area. Every device has a different screen size and aspect ratio. Moreover, viewable areas vary from browser to browser. For instance, browsers with a fixed bookmarks bar provide a smaller viewable area. The cover image gets cropped to appear borderless on the screen.
Image Ratio
Let's look at various aspect ratios of the image—before and after it is uploaded to the website as a cover image.
Vertical Image
Square Image
Thin Horizontal Image
Horizontal Image with 16:9 Aspect Ratio
Best Size:
These are the best parameters for uploaded images:
Format: JPG
Width: 1680px
Resolution: 72 dpi
Color model: RGB
Compression: 10
Cover Height
A thin cover has a height of 60% or 70%, not 100%. It serves a more formal function as the user's attention shifts to the information that follows the cover.

To create such a cover, go to the "Height" field in the block settings. You can set height in pixels (e.g. 400px) or viewport height units of measurement, percent (1vh is 1% of the viewable area). We recommend to set height in vh.
Color
How to change the tone of the background image
We change the tone of the image when we want to make the cover text easily readable. To do this, open the Settings panel of the cover block and adjust the filter color. Here you can see a cover image to which one filter color has been applied. Sometimes, it is the brand color or a website's primary color that is used for toning.
How to blend the color into the next block's color
Sometimes the cover should gently blend into the next block. To achieve this effect, the color of the end filter should be set at 100% opacity. The color of the filter should be the same as the color of the next block.
Making the cover twice as high while applying these two settings at once will help you achieve the effect shown below:
Gradient and Color Fill
There are two toning parameters in the block settings: opacity and color. Set the opacity to 100% and select a color—this will be the color of the cover.
If you select different colors, one will blend into another smoothly.
Video Cover
You can use a video instead of an image. There are two ways to do it.
How to Add a YouTube Video
Upload a video to YouTube or find an existing one there. Then go to the Content panel of the cover block and paste the video link in the appropriate field. This way, you can create a video cover.
Our Company
Experts in the art
Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach, and Hong Kong
How to Add WebM and MPEG-4 Videos
You can use online converters to create WebM and MPEG-4 videos and host them at your server or the converting service's website. For instance, gfycat.com allows both converting and hosting.

Open the Settings panel of the cover block and add the video links to the corresponding fields.
Why use both formats?
Browsers use different formats, so there is no unified format. When a user comes to your website, they will see a video their browser can play. Otherwise, the cover will appear empty.
Mobile
Screens have a wide range of aspect ratios, and the cover may appear differently on different devices. While common aspect ratios will not make dramatic changes to the cover image, mobile devices can alter it beyond recognition. Please, take time to learn how to create a mobile-friendly cover (or any other block) using this comprehensive guide.
Why cover videos do not play on mobile

Due to the peculiarities of mobile OS, video covers will not play on mobile devices. Mobile OS disable autoplay. If you have made an autoplay video cover, do not forget to add an image in the Content panel of the cover block. The image will appear when the video cannot be played, i.e., when visitors access your website from smartphones or tablets.
Made on
Tilda