Images, Styling Settings & Zooming
Images, Styling Settings & Zooming
IMAGES & IMAGE STYLING
Overview / Intro
Media Library
Slideshows
Page Backgrounds
How Images Are Optimized
< BACK TO OVERVIEW
In online design, you have two ways to display visual information like an image: as a 'true' media element or as a background for a box. This article explains the difference between the two methods.
Images: 'image' element or a 'box' with an image background?
There are two options in html/css for you to add images to your page. We will not jump into the code (it is our goal to save you from code) but we will show you when you would use which.
Have a look at the image below. Visually, there is no difference. Yet, one is an 'image' element; and one is a 'box' element with an image background.
When to use an image and when to use an image fill (background)?
Luckily, it is rather obvious when you should use which method.
For example, when you produce an annual report, and in the preface your CEO's picture is under the name, you will use an image. The image is part of the content, it is not used mainly for decoration.
When you create a header for an article about Wall Street, and you place your article title and a summary over that image, that would be a box with a background fill. The image is mainly there for decorative purposes and as a background. The word itself says how it should be used!
Differences between an image element and a box element with an image background
Here are the differences between both:
a) Adding other elements
You cannot place other elements into an Image element. But you can place other elements onto a Box element, whether it has an image background or any other background.
b) Adding Tags (<a> tags)
Tags, or <a> tags, are additional information which you can add to visual elements. Searchbots and screenreaders can identify image elements as an image, but they don't see the image's content. Tags are used by searchbots and screenreaders to identify what the image is about.
Boxes with an image background do not offer you this, for screenreaders and searchbots a box is a box, independent of what background it may have.
You can add tags to images by opening the Image Properties from the menu at the left of the canvas, and then add your Alt tag.
c) Filters & Backgrounds
Image elements do not allow for background fills. Boxes with a background fill allow for more background fills to be added.
For images, a number of filters are available which can be applied to the image. See below for more information.
Here is an example of an image with a reduced brightness filter added:
Contact Support
STAY IN THE LOOP
Sign up for product updates