background-img

components background-img

Definition

The background image component has the purpose to have some content with a background image, which does not have fixed ratio and that adjusts to the content.

This component is agnostic to the content, therefore does not define inset spacing, alignment, color or widths. These attributes depend on use case and should be defined at another level or using utilities. To see a living example, see Faq template.

c-background-img

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.

Razor

Open in new tab

Loading...

Content examples

c-background-img complex content

Handlebars

Hi, where do you want to travel?

Razor

Open in new tab

Loading...

c-background-img large content

Handlebars

Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.

Vis in iracundia sadipscing
Duo ea alii rebum reprimique
Cu sumo nostro senserit eum
Sed eu nibh mutat, at fabulas iracundia sit

Vis in iracundia sadipscing
Duo ea alii rebum reprimique
Cu sumo nostro senserit eum
Sed eu nibh mutat, at fabulas iracundia sit

Razor

Open in new tab

Loading...

c-background-img img with ratios

The background img allows you to define a ratio for the content. Content should be concrete and without potential to grow vertically.

Consider to use the Promotion-image component if it matches your case.

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.

Razor

Open in new tab

Loading...

Different image sizes

The background image should cover all content area respecting original image ratio - image is not squeezed-, independently of its height and width. It uses CSS property object-fit which is not supported in IE so fallback css rules have been written, with more or less success.

c-background-img image height > content height

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image height < content height

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image width > content width

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image width < content width

Lorem ipsum

Lorem ipsum dolor sit amet.