A website cover, or a hero section, is the first thing visitors see and that's where they decide if to stay on the page or close the tab.
👉 The main rule for the cover is that the headline is more important than the image. Your message is key, and a background photo creates the right mood. Hence choose an image that doesn't affect readability and fits your website's style, here's how.
▪️ Select a Background Image Without Small Details
To ensure the title is easy to read, opt for images leaving room for text, such as landscapes, with most of the space occupied by the sky.
▪️ Place the Title Over Insignificant Details
Fit the text into the photo so that it doesn't overlap the important parts. If a person is on the right side of the photo, put your text on the left, and vice versa.
What If the Title Is Still Hard To Read?
▪️ Darken The Photo
To make the heading stand out, use a dark filter to dim the photo and improve readability. The filter opacity depends on the tone of the image—20% opacity may work for one image, but for a lighter one, you may need to use 70%.
▪️ Add Color Filter
Another trick is toning the image. Use color filters instead of black ones, create a gradient with the brand or accent colors of the website, or select a shade that fits the palette of the image.
▪️ How To Add Image Filters on Tilda
To add a color filter to your cover, open the Settings tab of the block and select the colors and opacity you need under the "Filter Start Color" and "Filter End Color" fields. If you choose different colors, you'll get a gradient. Ensure that the text contrasts well enough with the filter color. Play around with opacity to find the best value.
If you design in Zero Block editor, you can put a color shape under the text to make it more visible and reader-friendly.
👉 The main rule for the cover is that the headline is more important than the image. Your message is key, and a background photo creates the right mood. Hence choose an image that doesn't affect readability and fits your website's style, here's how.
▪️ Select a Background Image Without Small Details
To ensure the title is easy to read, opt for images leaving room for text, such as landscapes, with most of the space occupied by the sky.
▪️ Place the Title Over Insignificant Details
Fit the text into the photo so that it doesn't overlap the important parts. If a person is on the right side of the photo, put your text on the left, and vice versa.
What If the Title Is Still Hard To Read?
▪️ Darken The Photo
To make the heading stand out, use a dark filter to dim the photo and improve readability. The filter opacity depends on the tone of the image—20% opacity may work for one image, but for a lighter one, you may need to use 70%.
▪️ Add Color Filter
Another trick is toning the image. Use color filters instead of black ones, create a gradient with the brand or accent colors of the website, or select a shade that fits the palette of the image.
▪️ How To Add Image Filters on Tilda
To add a color filter to your cover, open the Settings tab of the block and select the colors and opacity you need under the "Filter Start Color" and "Filter End Color" fields. If you choose different colors, you'll get a gradient. Ensure that the text contrasts well enough with the filter color. Play around with opacity to find the best value.
If you design in Zero Block editor, you can put a color shape under the text to make it more visible and reader-friendly.
