Background image block

Users scan webpages quickly and can have trouble distinguishing important content from the rest. If important content isn't highlighted, users can easily miss the information.

Background image block is designed to help campaign/marketing content be more effective on a page by providing a strong visual presence on desktop views. The large decorative image is removed on smaller screen sizes to provide a mobile-friendly experience.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a background image block supports.

Select layout:

Select block height:

Select image position X:

Select image position Y:

Select container width:

Enable title:

Select title text alignment:

Select title style:

Select title line style:

Background image block title

Donec mollis nisi sit amet dolor porttitor tempor. Phasellus at turpis magna. Morbi ac lorem ac nulla tempor sollicitudin. Fusce in commodo nisi, semper consequat lacus. Quisque vitae velit in sem fringilla porttitor et ac velit. Vestibulum aliquet volutpat eleifend. Proin congue lectus urna, vel luctus nibh sodales in. Nam ullamcorper volutpat lectus sit amet accumsan.

Eau Claire Area Improvements

Code

Responsive preview

Usage best practices

Place the background image block anywhere on the page. Using it closer to the top can create interest and get the user to continue reading the page. Closer to the bottom can show users important related information.

Consider using background image block to:

highlight important marketing messages
bring attention to navigational items
create visual interest on campaign pages

Usage examples:

special event information on a campaign page

Do

Choose an image with adequate contrast against the translucent white text container.

Use sparingly as too many background images can be visually overwhelming and distract users from the other content.

Don't

Do not use images that have a particular focal point or conveys important information.

Do not constrain the background image block within a grid as it is meant to create a big impact and should be edge to edge.

Do not use the background image block for full page content as it is meant to highlight important information.