Creating a full-width Bootstrap layout with dual backgrounds and a two-column structure

Explaining this concept is quite difficult, which is why I haven't been able to find an answer on Google.

I am currently using Bootstrap 3 and I am trying to create a layout with a full width background image, along with two transparent color backgrounds layered on top. To better illustrate, I have created an example image:

https://i.sstatic.net/3VRtW.png

1+2: Combined transparent color background

3+4: Combined transparent color background

1+2+3+4: Combined background image (bottom layer)

If anyone has any insight on whether this is achievable and how to implement it, I would greatly appreciate your help!

htmlcsstwitter-bootstrap

Answer №1

Indeed, you can implement the methods discussed in this query whilst expanding them to encompass the columns.

The demonstration on Codepen (provided below) illustrates the outcome more effectively compared to the Stack Snippet included for reference.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* prevent scrollbar */
}
.container {
  width:50%;
  margin:auto;
  margin-top: 1em;
  
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  /* override bootstrap */
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}
[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}
.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);
}
<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

View Codepen Demo

Answer №2

Finally cracked the code with a little help from Paulie_D

Here's a straightforward example:

HTML:

<div class="fullwidth">
<div class="cell red20">xxx</div>
<div class="container cell">
      <div class="row">
      <div class="col-sm-4 red20">xx</div>
      <div class="col-sm-8 red50">xx</div>
      </div>
  </div>
    <div class="cell red50">xxx</div>
</div>

CSS:

.fullwidth {
  background: url('http://www.ustudy.eu/nl/wp-content/uploads/2013/10/Test-taking-from-Flickr.jpg');
    display:table;
    width:100%;
}
.cell{
    display:table-cell;
    vertical-align:top;
}

.red20{
    background-color:rgba(255,0,0,0.2);
}

.red50{
    background-color:rgba(255,0,0,0.5);
}

Take a look at the jsfiddle link for a live demo: https://jsfiddle.net/DTcHh/14045/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display an image file using the <img src=""> tag in PHP

I am facing a small issue and could use some assistance. My goal is to display the ROW image associated with each unique ID in my database. Below is an excerpt from my PHP code: while ($row = $result->fetch_assoc()) { // Display the image ...

phphtml

Access Information within live tabs

When attempting to click on any tabs in order to retrieve their respective data, I am successfully able to do so. However, I'm only able to retrieve the data of one row at a time. Can anyone provide assistance with this issue? <div class="col-lg-1 ...

phphtmltwitter-bootstraplaravel

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

cssinternet-explorergoogle-chrome

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across: Adding a query string in the link src: /mstylesheet.css?cache_buster=12345 Changing the filename each time: /mstylesheet-12345.css Using Apache with Cache-Control "must-revali ...

javascripthtmlcssbrowser-cache

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

csshyperlink

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: https://i.sstatic.net/hBiA4.jpg Can you explain how to achieve this? ...

htmlcss

Difficulty with MultiHandleSliderExtender and postback in JavaScript

Attempting to implement the multihandlesliderextender (from the Ajax Toolkit) for creating a price filter option on a webshop. Upon selecting a new price, it should trigger a reload of everything including extensive behind-the-scenes code. Referenced an a ...

javascriptasp.nethtmlajax

Incorrect posture during the movements

Utilizing Jquery Drag and Drop, I have implemented two swap-able divs. However, during the animation process of swapping the divs, their positions are not properly maintained. The actual swapping of the divs works correctly, but there is an issue with the ...

javascriptjqueryhtmlanimationjquery-animate

Is it possible to automatically collapse the Bootstrap navbar when the viewport is not wide enough?

Currently, my navbar is styled with a "shrinkwrap" background to match the width of the content: <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex"> <div class="container-fluid"> ...

htmlcsstwitter-bootstrapbootstrap-5

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

Implementing overflow-x: hidden in React JS for enhancing mobile user experience

In my current React project, I encountered an issue where setting overflow-x: hidden in the index.css file for the body tag worked fine on desktop screens but not on mobile. I read that adding it to the parent element would be a better solution, however, ...

htmlcssreactjs

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

phpjavascripthtmlcss

What is preventing Bootstrap properties from being applied to HTML elements appended to the DOM through JavaScript?

Currently, I am immersed in a project that utilizes Bootstrap to generate various nested components styled in accordance with Bootstrap's class system. I triumphantly crafted a card component using Bootstrap, but encountered a challenge when attemptin ...

javascripthtmldebuggingdombootstrap-5

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

I have a unique scenario where I am working with two images. When the mouse hovers over each image, two corresponding menu bars appear. However, the issue is that when the mouse moves away from the images, the menu disappears. Any suggestions on how to im ...

javascriptjqueryhtmlcss

Instructions for converting a blob URL into an audio file and securely storing it on the server

After successfully recording and adding the audio to my HTML page within the audio tag, I managed to obtain the blob source URL from the tag using the following line: var source = document.getElementById("Audio").src; The blob source URL looks ...

javascriptjqueryhtmlaudioblob

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss

The calendar popup in the angular-bootstrap3-datepicker failed to update during page loading

My current challenge involves implementing a datepicker using the angular-bootstrap3-datepicker library. The date picker is functioning properly, but I am encountering an issue where the calendar months do not refresh when assigning values at page load. It ...

jqueryangularjstwitter-bootstrapdate