What's the reason the background is missing from the entire section?

I am trying to understand why the grey background is not appearing throughout the entire section. I have everything enclosed within the element with the ID of "mid-section". Even though the CSS specifies a grey color for the "mid-section" background, it does not extend down the full length of the screen. How can I ensure that the background color covers the entire screen?

<section id="mid-section">
<div class="pic">
  <img class="pic-image" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bbq-party-grilled-sausages-1561576780.jpg?crop=1.00xw:0.753xh;0,0.0562xh&resize=1200:*" alt="bbq">
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>


    <div class="col-lg-4 col-md-6">
      <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]"
          src="https://images.unsplash.com/photo-1551782450-17144efb9c50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" data-holder-rendered="true">
        <div class="card-body">
          <h5 class="card-title">Best Burgers</h5>
          <p class="card-text">Aliquam erat volutpat. Cras vulputate laoreet metus non blandit. Sed pretium in arcu ac sollicitudin. Quisque at erat metus. Vivamus id viverra nunc, ac convallis dui. Curabitur lobortis purus sit amet egestas
            egestas. Donec quam nunc, pretium id nibh interdum, malesuada condimentum est. Quisque sed scelerisque mi.</p>
          <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted"></small>
          </div>
        </div>
      </div>
    </div>
  </div>


.card {
  position: absolute;
  z-index: 1;
}

.card-img-top {
  height: 225px;
  width: 100%;
  display: block;
}

#mid-section {
  background-color: #DCDCDC;
}

.pic-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  padding-top: 350px;
  position: relative;
}

.container {
  padding: 50px;
}
htmlcssbootstrap-4frontendweb-frontend

Answer №1

Utilizing a grid system means that the width is predetermined, with components adding to generate the height. However, making the .card position absolute can cause the collapse of the height, resulting in the background color not being visible except for the added padding.

.card { position: relative; }

It's worth noting that Bootstrap 4 introduces flex-box, ensuring equal height across all columns within a row without the need for previous Equal height calculations which are now outdated.

.card { height: 100% } /*is your equal height*/

Furthermore, utilizing Bootstrap card-deck eliminates the need for columns entirely. By adjusting the flex-basis in a media query and/or using flex-grow and flex-shrink, you can easily stretch or downsize elements as needed, simplifying the structure even further.

Best of luck!

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

Creating text input without borders using HTML and CSS

I have managed to create text inputs without borders using HTML and CSS, but I am facing an issue. Whenever I click on the input field, a yellow border appears instead of the one I removed. It seems like this is coming from the default stylesheets, and I&a ...

htmlcsstextborderless

Tips for customizing the appearance of the span tag within the option text of an HTML select

Unique Link In my current situation, I am facing an issue where the asterisk in the first option of my HTML select element should be displayed in red color. Despite my efforts to style it, the asterisk always appears in the default black color. I have pr ...

htmlhtml-select

Button with small width containing an icon and text

I am trying to create a simple HTML button that has an icon on top and a description below it. <div class="mybtn"> <div><img src="someimage.png"></div> <div>Button description</div> </div> My question is, ...

htmlcss

One method to add a hashtag before a variable in the HTML attribute value data-bs-target

Basically, I have set up a vue web application with a container containing multiple bootstrap cards. Each card has a button that is supposed to collapse a form for guests to apply. However, the issue arises when I click on the button of one card, as it col ...

javascripthtmlcssvue.js

What is the best way to shade the background when a hyperlink is pressed?

I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...

phpjqueryhtmlcssnavbar

Is it possible to make the body background image adjust its size to the browser window

Looking to change the body background using a jQuery script. The goal is to scale the background image to fit the browser window size. I've come across a script called , but it seems to affect the class img and not the background-img. Any suggestions ...

jqueryhtmlcssautoresize

Prevent fluctuations in container height + tips for aligning a list item at the bottom

In my jsFiddle demo here, I have implemented a vertical menu. Upon hovering on the icon, I would like the description of that menu to appear with a fade effect. Q1: However, during the fading transition, the text in the description wraps into a new line, ...

css

The removal of classList.remove() only eliminates the class itself, not its contents

My goal is to add one class and remove another class when the start quiz button is clicked. While the 'info_box' class is successfully added, the 'start_btn' class does not get removed; it just changes position (from flex to no flex). T ...

javascriptcssbootstrap-4

Using the drop and drag features within a table cell

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> & ...

phpjavascriptjqueryhtml

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

I've designed an 'Album' (React) component to showcase album artwork, name, and release date in a card-like format. This component consists of two divs - one for the photo and the other for text. Each artist's discography displays multi ...

javascriptcssreactjstypescripttailwind-css

Align text vertically within Bootstrap carousel area

I'm struggling with centering text both horizontally and vertically in a Bootstrap 4 carousel. I've set up the bootply with a carousel, but the text is stuck in the upper left corner instead of being centered on the screen. <div class="carou ...

htmlcsstwitter-bootstrapbootstrap-4

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Unable to automate tests with file uploads

In my automated tests, I have consistently used the same function to upload files: var path = require('path'); //the file to upload fileToUpload, //this is variable that inserts the path to find file to upload ...

htmlangularjsselenium-webdriverautomated-testsprotractor

What is the best way to display an income statement div with three elements in a vertical position once the screen reaches a medium width?

Can anyone help me create an income statement div with three elements that has a responsive layout? I want these elements to change from a horizontal display to a vertical one when there is limited space, especially on medium width screens. The initial la ...

htmlcssbootstrap-5

What methods are available for utilizing a runtime variable that TypeScript is unaware of?

I am looking to implement a global variable in TypeScript that will be defined dynamically at runtime. This global variable is necessary for transferring configuration properties from the server-side language to JavaScript. My approach involves using TypeS ...

htmltypescript

I am experiencing an issue where the left sidebar div is not aligning correctly in my HTML

I am currently facing an issue with a gap that I can't seem to fix right now. Below, you will find a screenshot along with the HTML and CSS code that I have used. Despite trying various methods and looking for solutions on platforms like Youtube and ...

htmlcss

Ways of accessing an array within an if statement

I have a dashboard with admin privileges for my application. In this dashboard, the admin can select a user from a dropdown list. Once a user is selected, I make an AJAX call to retrieve the user's data and store it in a variable named $result. Howeve ...

javascriptphphtmlajaxscope

Customize the appearance of each TreeItem in JavaFX using CSS to assign unique

I am looking for a way to color individual Tree Items in a treeView based on specific conditions. I found a promising answer, but unfortunately, I am struggling to implement it. You can check out the answer here. My main obstacle is understanding how to u ...

cssjavafxtreeview

Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

My setup involves two Grid components, with one structured like this: <Grid container alignItems="stretch" spacing={3}> <Grid className="left-pane" item md={4} xs={12}> <Navigation /> </Grid> <Grid className="right-pan ...

cssreactjsmaterial-ui

The unhandled type error rises with each scroll I make

Having been diligently working on my current website project, I encountered a puzzling issue. Upon writing code to implement smooth scrolling throughout the site, I found myself facing a persistent error that continues to escalate with each scroll up or do ...

javascripthtmljqueryscrolltypeerror