CSS background for entire half of '.row' inside '.col-md-6'

half background image css
css split background color horizontal
half and half background
half background-color css
two color background css top and bottom
css background half image half color
css two background colors in one div
background-size css

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);
}

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.

CSS: Set a background color which is 50% of the width of the , Older Browser Support. If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something  Maybe you only need 1 div. Make the background in Body element the whole and repeating all the way. And on top of that make 50% right half div. This way you get no complication of any odd number of pixels width.

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/

CSS background for entire half of '.row' inside '.col-md-6', 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  Learn how to create a full page background image with CSS. Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and a half-screen) responsive background image: Use a container element and add a background image to the container with height: 100%.

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>

CSS Code to Add Image Which Covers Half of Page Background, css file to display a background image which covers 50% of any page. The 2nd solution provides CSS code which uses 2 images. One to cover the background of  Is it possible to have a background image for half of the page and some contents below, and hav a navmenu that remains fixed whenever I scroll down? then this CSS

Adding a half background to your page sections with CSS, An index allows you to stack pages on top of each other, creating an interesting layout by alternating full-width images with text or adding  Like many things in CSS, there are a number of ways to go about this and we’re going to go over many of them right now! Using Background Gradient. One simple way we can create the appearance of a changing background is to use gradients. Half of the background is set to one color and the other half another color.

Half and Half Background Colour Using CSS, If you have a full width website with a two column layout, it's sometimes necessary to make the container background stretch beyond the inner  If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

How To Create a Full Page Image, Learn how to create a background image that covers the entire browser window. The following example shows a full-screen (and a half-screen) responsive  Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

Comments
  • Can you provide your CSS?
  • Your CSS is important here.
  • Which bootstrap version do you use? And please provide some css.
  • Thanks for the corrections. I have added that I am using Bootstrap 4 and some CSS