Background Layer Visibility

The background property controls the visibility of a background image or color on an element.

The Visibility property provides two choices: visible and invisible. Opting for Visible ensures the background is shown on the page, while Invisible conceals it from view, although the element retains its position in the layout.

Background visibility can be specified per breakpoint, you can adjust the visibility of backgrounds based on the viewport size or device characteristics.

By default, backgrounds are visible on all breakpoints.

 

 

Summary

  1. Click MD to specify the visibility for medium extra large screens then click the three dotted lines. Next, set the Visibility for MD to invisible.

Section & Layout Demo — Content — Octana Development — examples-basic-test — Contentful

 

2. Observe how the background color disappears for MD.

Click the XS to see how the content looks for mobile and smaller screens. By default, the background color of the element is invisible. When page is viewed on mobile devices and small screens, the background color becomes visible.

Section & Layout Demo — Content — Octana Development — examples-basic-test — Contentful (5) (1)