Home >Web Front-end >CSS Tutorial >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:
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!