You can add images to your page as stand-alone Image Elements, or by adding them to the backgrounds of containers, grids, or text elements.

Adding an image as a background is the best approach when:

  • want to be able to easily crop an image to fit the page design.

  • want to float other kinds of content over top of the image, such as text or buttons.

  • want the image to be full-browser-width, extending past the max-width of the website.

  • want to tile an image within a container.

  • want to add multiple background images to create blending effects, or to create a simple automated carousel.

If you want to preserve the image's aspect ratio, or you're concerned about improving SEO by adding metadata to an image, it may be better to use the Image Element instead of a background image.

How do I open the Background Image Panel?

Select an element and click the Background Image Panel in the right toolbar, or choose "Background Image Controls" from the "Window" menu.

Add a Background Image

There are a few ways you can add a background image to an element.

Within the Background Image Panel, click 'Add Image' to upload an image from your local drive. The image will be automatically resized for use on the web and will be added to the media library.

If the image you want to use is already in your media library, click the "folder" icon to select it. You can drag images from the library into the '+' drop zone.

You can also just grab an image from your media library or anywhere on your desktop and drag-and-drop it onto the page element that you want it to be a background for.

Background Image Positioning

You can control the positioning of your images on both the x-axis and y-axis by using the sliders, drop-down, or by entering in exact values (as a percentage or a pixel value.)

Tip: Brandcast will automatically resize and treat images for the web so you don’t have to! However, if you’re not getting the exact desired position, try re-uploading the photo in a much smaller or larger format.

Fixed Background

'Fixed Bg' refers to fixing the positioning of a background image on the page. This means it WILL NOT SCROLL with other content when users scroll down the page. This can be used to create a parallax-like effect.

Note that this feature will not work on mobile devices! If you want to set a background to fixed on desktop, make sure you use Device Mode to un-fix it on phone and tablet.

Repeat Image

By default, background images will not repeat within their container. If you want, you can set a background image to repeat horizontally (repeat-x), vertically (repeat-y), or both (repeat.)

Image Scaling & Resizing

  • Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

  • Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.

  • Auto: Default value. The background-image maintains its original width and height.

  • Choosing a px or % width: You can use one of the values provided or type in anything you want. This will determine the width of your image in the container.

Multiple Background Images

By repeating the process, you can add multiple background images to an element. You'll see all the backgrounds currently being applied in the Background Image Panel:

You can reorder the images by dragging them to a new location. To remove a background image, select it and click "Remove Image", or hit the <delete> key.

Adding multiple backgrounds allows you to blend them (see background blend mode below) and to set up a simple image carousel (see cycle images below.)

Cycle Background Images

If you have added multiple background images to an element, you can check this box to make them cycle automatically. This will create a "carousel"-like effect.

Images will cycle in the order they appear in the Background Image panel, from left to right. If you want to change the order, drag the thumbnails to rearrange them.

The timer dropdown allows you to set the rate, in seconds, at which the images cycle. By default, this delay is set to 2 seconds.

Background Blend Mode

This dropdown allows you to define the way the background image blends with its parent container, and with other background images within in. 

You can use this feature to create visual effects that brighten, darken, dissolve, or color-tint the image.

Note that adding multiple images and blending modes to individual components are new to the web! In offering our users cutting edge toolsets and capabilities, please note some designs and effects created will only be supported by modern browsers. 

Did this answer your question?