In this article I will share a tip to build a full-bleed layout with CSS I learnt from other CSS gurus.

Let's start 🚀

Scenario

We have a webpage with multiple sections. We need to standout some sections or build a layout with alternate section to have different background color.

Considering all the sections are wrapped in a container with some max-width. When we give background to a specific section it only covers the width of the container.

In other words the inversed section background is not stretching across the whole viewport width.

Desired outcome

Our goal is to have the dark section background stretched across the viewport width.

Example (Issue)

The above image illustrates the problem we have with dark background section. Dark background is constrained to only the width of the container width which we can see as red dashed border. The blue border demonstrates the body width.

Solution

1. Markup

Let's create 3 sections wrapped in a div with class container.

<div class="container">
  <section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
  <section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
  <section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
</div>

3 sections with some styles applied for border and margin within container.

2. Required CSS

CSS class for inverse/dark background

The styles for inverse or dark background section.

.inverse{
  --bg-color: #222; // variable for background color
  background: var(--bg-color);
  color: #fff;
}

Now, after applying inverse class on middle section from above markup. We have 2nd section styled with dark background. Notice the background is contained within container width.

CSS class for full-bleed

The styles for full-bleed effect include box-shadow and clip-path properties.

.full-bleed{
  box-shadow: 0 0 0 100vw var(--bg-color); //--bg-color is #222
  clip-path: inset(0 -100vw);
}

Now, we also apply full-bleed class to 2nd section.

<div class="container">
  <section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
  <section class="inverse full-bleed">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
  <section>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque nobis quidem fugit culpa maiores a eos, dolorem expedita debitis facilis ab dolorum sint odit corporis repudiandae molestias placeat quod.
  </section>
</div>

After applying our inverse and full-bleed classes we have 2nd section background stretched across the viewport width.

Key point

In order to have full-bleed working, background color of the inverse section and box-shadow color must be same. It is easier to manage if we have variable declared for background color.

Codepen

Conclusion

There are several ways to build full-bleed layout. The above approach is very simple and effective to achieve the desired outcome.

We don't have to deal with multiple selectors. We simply create two classes, one for inverse background and one for full-bleed effect. Apply these classes where required. Perfect for responsive webpages.

CSS is becoming more and more powerful now a days and we should use the widely available modern properties to our benefit. Although, keep check on the browser support :)