'.col-md-6'内'.row'的整个一半的CSS背景

Question

I am trying to set a background for half of a row as shown in the image with the grey representing the background image.

But when I set the background of the second .col-md-6, It only sets the background for that and leaves out the padding. I understand that is how it is meant to be. But I was hoping for suggestions on how to go about this while achieving the layout I want ( shown in the image). I am using Bootstrap 4.

So far my code structure is:

<section>
 <div class="container">
  <div class="row"> 
    <!-- LEFT SECTION -->
    <div class="col-md-6">
      <div class="container">
         TITLE AND CONTENT LEFT
      </div>
    </div>

    <!-- RIGHT SECTION -->
    <div id="right" class="col-md-6">
      <div class="container">
         TITLE AND CONTENT LEFT
      </div>
    </div>

  </div>
 </div>
</section>

My CSS is:

#right{
 background-size:cover;
 background-image: imageUrl;
}

//For overlay over image
#right:before{
 content:"";
 position: absolute;
 left:0; right: 0; 
 top: 0; bottom: 0;
 background: rgba(195,68,86,0.2);
}

Answer 1

I assume you are using Bootstrap. The .row class has margins related to its parent. And since the .col-md-6 is inside the .row element, it has to respect its boundaries (thats how HTML and CSS works), except if you make the position of the .col-md-6 class "absolute", but that's not the default behavior with out-of-the-box bootstrap.

You could consider using .row-fluid, it changes the margins, but if you want to keep that padding, you will need to make some custom css to make the padding inside the .col-md-6 classes.

And remember: margin > border > padding

The background is applied only inside the borders.

Answer 2

Use class container-fluid and following css.

<div class="container-fluid">

CSS

.row {
  border: 5px solid black;
}

.col-6 {
  padding: 0 0 0 30px;
}

.row div.col-6:last-child {
  background: #aaa;
  padding: 0 30px 0 0;
}

.container {
  padding: 0 30px 0 0;
  border: 1px solid grey;
}

Sample: https://jsfiddle.net/aq9Laaew/47448/

Answer 3

The easiesst way:

 section{position: relative;min-height: 200px;} section:before{content:"";position: absolute;left:50%; right: 0; top: 0; bottom: 0;background: rgba(195,68,86,0.2);} 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <section> <div class="container"> <div class="row"> <!-- LEFT SECTION --> <div class="col-sm-6"> LEFT </div> <!-- RIGHT SECTION --> <div class="col-sm-6"> RIGHT </div> </div> </div> </section>