sunweb

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.

Loading...

Content examples


c-background-img complex content

Handlebars

Hi, where do you want to travel?

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

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
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.

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

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image height < content height

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image width > content width

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.

c-background-img image width < content width

Handlebars

Lorem ipsum

Lorem ipsum dolor sit amet.