Afbeelding site goede verhoudingen
|

Image background and header

Bybasbuis Design, Tips & tricks

Image background and header

Using an image as a header block background or any background.

Many websites use images that are not properly proportioned

The intention is that a background image with, for example, a header functions correctly on desktop, tablet, and mobile.

Example desktop and mobile ratios

Before deciding on the background image to use, it is best to make a sketch like this one. Simply draw a 1:1 box and a 5:1 box on the image. Check if sufficient recognizability/usability remains.
Afbeelding site goede verhoudingen

Color, light and dark

Does the text remain readable?

When text is placed over the background image, it is important to consider the dark and light areas within the image. After all, the text must remain legible. Consider the distribution of the text, which is entirely different on mobile, tablet, and desktop.

Visible part on desktop or laptop

Achtergrond afbeelding desktop

Below is some text as an example. As you can see, the light part causes some readability issues.

Meditation is your medicine.

The art of relaxation and inner reflection – centering to be yourself

Even when the text is darker, it remains difficult to read. Therefore, this photo is not a good choice to use as a background for text. Additionally, the essence of the photo has been lost; it is no longer recognizable.

Meditation is your medicine.

The art of relaxation and inner reflection – centering to be yourself

You can improve recognizability by giving the image (the section or container) a minimum height. In this example, 250 pixels. The image has also been given a transparent gray overlay, making the text more readable.

Meditation is your medicine.

The art of relaxation and inner reflection – centering to be yourself

On a mobile device, the image with text would be displayed approximately like this. Due to the white text on the white part with a gray overlay, the text is already less legible. In the bottom version, the text is aligned on straight lines only for mobile; that is already better. The text is more legible and the image is more visible.

Meditation is your medicine.

The art of relaxation and inner reflection – centering to be yourself

Meditation is your medicine.

The art of relaxation and inner reflection – centering to be yourself

Image (cover) position

In most page builders, you have control over the part of the image that is considered the ‘center’. For an image, you can choose from several display options. You can set it so that the image is always displayed in its entirety (never do this as a header background) or ‘Cover’. Cover means that only a part of the image is displayed at a time. That part depends on the aspect ratio of the container or column using the image as a background. It is important that the correct part is used. The large dot indicates the part that is the center. The builder will always maintain this as the center, both vertically and horizontally. This way, you can prevent, for example, only the vegetation or the water from being visible.
Afbeelding Cover positie

To remember

  • On mobile devices, the ratios are 1:1 to 1:2 (height/width)
  • On a tablet, the ratios are 1:3 to 1:5 (height/width)
  • On a desktop, the ratios are 1:5 to 1:8 (height/width)
  • Even if only the center of the image is visible, the image must still be usable.
  • A difference that is too large between light and dark areas makes applying the image much more difficult.

Similar Posts