How to Create a Full-Width Background with Transparent Color Overlays Using Bootstrap 3?

Bootstrap Full-Width Background with Transparent Color Overlays

Creating a full-width background image with transparent color overlays using Bootstrap 3 may seem daunting, but it's possible with a clever technique.

To achieve this, you'll utilize a combination of absolute positioning, pseudo elements, and color overlays.

HTML Structure:

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

CSS Styles:

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}
.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5);
}
.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

Explanation:

• The .container element is set to a specific width and centered with auto margins.
• A pseudo element .extra:before is added to extend the width of the container beyond the viewport, creating the illusion of a full-width background.
• The .col elements are given a solid border for visualization.
• Pseudo elements within .left and .right act as transparent color overlays, covering the respective columns.

This technique allows you to effortlessly achieve the desired background and overlay effect with Bootstrap 3.

The above is the detailed content of How to Create a Full-Width Background with Transparent Color Overlays Using Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!