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:
- ...you want to be able to easily crop an image to fit the page design.
- ...you want to float other kinds of content over top of the image, such as text or buttons.
- ...you want the image to be full-browser-width, extending past the max-width of the website.
- ...you want to tile an image within a container.
- ...you 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.
Learn more about images by watching our pre-recorded webinar on working with images.
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, 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 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.
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.
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.