Images

Use this to add images to your page content.

You can also create image links, add mouse over effects, and link to a large image.

Responsive images

The below images have been added in responsive columns. Try to change the viewport size (eg check on a smartphone or change the size of your browser window) to see, how the image size changes.

ylang ylang

pelargonium

sunflower

flower vector

This is an SVG

Mouse over and large images

ylang ylang peppermint

Mouse over

pelargonium

Title on mouse over and large image on click

sunflower calendula

Mouse over and large image

ylang ylang

Simple image link

ylang ylang peppermint

Image link with mouse over

pelargonium

Image link combined with link to large image

pelargonium

Multiple image links including one to large image and one to download it

Full width image

Background image

A full width area with a background image that can have responsive height ("viewport" or in any CSS unit). The background image can either always cover the whole area or fit its height.

5 1  kingfisher

Regular image

The maximum width of an image is always 100% of its container.

Therefore, adding an image which has a width equal to or larger than the container will make it fit exactly to that container.

In the below example the container of the image is a full width content section. The original image has a width of 2000px. Thus, on any screen with a horizontal resolution of 2000px or less, the image will span all width.

You can safely add even larger images, because on smaller screens a responsive image logic automatically makes sure to convert the image that is downloaded to a size that fits the actual screen resolution.

5 1 kingfisher

You can also add multiple images in a single row in a full width content section.

2 1 flamingos

2 1 turtle

2 1 rabbits