Dual columns filling the entire page within a container

Is there a way for me to pass the background images dynamically through inline styles? I can achieve this easily with pseudo elements, but I would like the content of the right and left columns to be enclosed in a container. You can view my proposed solution below.

.colBackgrounds {
  position: relative;
  color: #fff;
}

.colBackgrounds .container {
  border-left: 1px dashed white;
  border-right: 1px dashed white;
}

.colBackgrounds:before, .colBackgrounds:after {
  z-index: -1;
  position: absolute; 
  content: '';
  top: 0;
  width: 50%;
  height: 100%;
}

.colBackgrounds:before {
  left: 0;
  background: red;
}

.colBackgrounds:after {
  left: 50%;
  background: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid colBackgrounds">

  <div class="row">
    <div class="container text-center">
      <div class="row">
        <div class="col-6">
          This is the content for the left column
        </div>
        <div class="col-6">
          This is the content for the right column
        </div>
      </div>
    </div>
  </div>

</div>

Is it possible to have separate background images for the red and blue columns?

Your assistance would be greatly appreciated, and I hope someone will offer an elegant solution.

htmlcssbootstrap-4

Answer №1

After much consideration, I devised a creative solution that allows for inline background: url('...');. It may be a tad messy, but it definitely gets the job done.

.pageSplit {
    position: relative;
    color: #fff;
}

.pageSplit .container {
    border-left: 1px dashed white;
    border-right: 1px dashed white;
}

.colBackground {
    z-index: -1;
    position: absolute !important;
    top: 0;
    height: 100%;
}

.colBackground:nth-child(2) {
    left: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row pageSplit">
        <div class="col-6 colBackground" style="background: red;"></div>
        <div class="col-6 colBackground" style="background: blue;"></div>
        <div class="container section">
            <div class="row">
                <div class="col-6">
                    CONTENT
                </div>
                <div class="col-6">
                    CONTENT
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

After much thought and consideration, I believe my final solution is the most optimal one that I can come up with at this time. I created a custom class for a half container that can be nested inside a:

<div class="col-12">
    <div class="row">

        <!-- This is where you would insert your container/halfContainer -->
        ...

    </div>
</div>

Take a look at the pen here

If you have any suggestions on how I can further enhance this solution, please feel free to share them.

Answer №3

If you're unable to access pseudo elements through inline styles, you can achieve a similar effect using the following method:

.colBackgrounds {
  position: relative;
  color: #fff;
}

.colBackgrounds .container {
  border-left: 1px dashed white;
  border-right: 1px dashed white;
}

.back{
  z-index: -1;
  position: absolute; 
  content: '';
  top: 0;
  width: 50%;
  height: 100%;
}

 .back.left{
  left: 0;
}

.back.right{
  left: 50%;
}

@media(max-width:768px){
  .back{
    width:100%;
    height:50%;
  }
  .back.right{
    top:50%;
    left:0;
    transfrom:translateY(-50%);
  }
   .back.left{
     top:0;
     left:0;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid colBackgrounds">
 <div class="back right" style="background-image:url('https://picsum.photos/id/607/900/900')"></div>
   <div class="back left"style="background-image:url('https://picsum.photos/id/609/900/900')"></div>
  <div class="row">
    <div class="container text-center">
      <div class="row">
        <div class="col-12 col-md-6">
          This is the content for the left column
        </div>
        <div class="col-12 col-md-6">
          This is the content for the right column
          
        </div>
      </div>
    </div>
  </div>

</div>

You can replace pseudo elements with 2 divs and then apply dynamic CSS to them.

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

Tips for marking a textarea as mandatory when a choice is made

I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...

javascripthtmltextareaselectionrequired

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

javascriptjqueryhtmlnode.jsexpress

Tips for positioning social media icons on the right side of the navigation bar

I need assistance aligning my social media icons with the navbar on the right side of the display. Can someone provide guidance? The first image shows the current layout, while the second image illustrates how I would like it to appear: http://imgur.com/a ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to keep the footer at the bottom and make it fixed in Material UI?

import * as React from "react"; import Container from "@mui/material/Container"; import Image from "next/image"; import Link from "@/src/Link"; import Box from "@mui/material/Box"; import Typography from &q ...

cssreactjsmaterial-ui

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...

javascripthtmlajaxmodel-view-controller

Extracting JavaScript variable data to PHP using Ajax technology

I've been trying to save latitude and longitude values in PHP variables, but I'm having trouble. Here is the code I'm using. Can anyone please help me figure out why these values are not being stored in PHP variables: Code: <!DOCTYPE h ...

javascriptphphtmlajax

What is the best way to resize a primefaces inputTextArea to match the length of the

I am currently working on improving the appearance of <p:inputTextArea/>. When the page loads, I notice: And when I click on that TextArea: Here is the code: <p:inputTextarea rows="6" value="#{bean.object.value}" style="width: 100%;" /> Is ...

javacssjsfjakarta-eeprimefaces

Develop a design utilizing a foundational database entity

I'm new to AngularJS and I am seeking guidance on how to properly separate the model from the controller. In my previous experience, I have always integrated models within the controllers. For example: angular.module("app").controller("customerContr ...

javascriptphphtmlangularjsmodel-view-controller

Reposition the span element to the right of the div tag

I need help adjusting the positioning of the elements in this HTML code. How can I move the span element with the image to the right of the div tag? Here is the code snippet: <div style='width:600px;padding-top: 2px;padding-bottom: 1px'& ...

javascriptcsshtmlwebix

Dynamic Autocomplete Text Input featuring API-supplied Array in Angular

Currently, I am exploring the process of populating a text box with user emails obtained through an API call to the server. select-users.component.html: <input type="text" placeholder="Email Search" aria-label="Email" matInput [form ...

javascripthtmlangulartypescriptmat-autocomplete

I keep seeing this strange [object HTMLSpanElement] appearing on my HTML page

Thanks for the help, the issue has been resolved and I appreciate your valuable time! ...

javascripthtmljquerytags

Using Webpack to Compile Sass (and keep class names local)

It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integr ...

javascriptcssreactjswebpack

Generating dynamic DOM elements using AngularJS can cause issues with the proper functionality of the Jquery .tab() method

My goal is to dynamically generate a list of elements - the first loop is dedicated to listing tabs for the menu, while the second loop involves the div with the tab contents. When I write it statically, everything works perfectly. However, the dynamic app ...

jqueryhtmlangularjs

Using HTML5 to implement a progress bar that updates on click

I currently have an HTML file that contains clickable content. <tr onclick="callfn('Afile.jsp?param1=<%= value1%>');" id="contenttr"> The function callfn is located in a JavaScript file that loads images. Because this function can t ...

htmlprogress-bar

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Today, I was experimenting with XMLHttpRequest to fetch news headlines from 10 different countries using the NewsAPI. I created 10 <li> tags for each country and assigned them an onclick function that triggers a JavaScript function to append the coun ...

javascripthtmlajaxxmlhttprequest

Overflowing content in a table within a div element

Issue: I am encountering a problem with resizing a table inside a div that contains input elements. When I adjust the browser window size or change to a lower resolution, the div element resizes and scales down, causing a horizontal scroll bar to appear. H ...

htmlcss

The jQuery html function may encounter issues when used in Chrome browser

Can someone help me figure out why this code isn't functioning properly in Chrome, even though it works fine in Safari? I've been searching for a solution but haven't had any luck! jQuery.noConflict(); jQuery(document).ready(function() { ...

jqueryhtmlgoogle-chrome

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

javascriptjqueryhtmlcoffeescript

User Registration - Showing Users Uploading Images

I am currently utilizing a plugin on my Wordpress website that can be found at: https://wordpress.org/plugins/user-registration/ If you wish to showcase a user's selected country, here is a simple code snippet you can use:- <?php global $current_u ...

phphtmlwordpress

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss