CSS Position background element to cover parents/parent - css

Question

How can I make the green background to cover all the .section class?
I have this structure:
section // one section will have one container
->container // one container can have multiple elements
->elements // the background class set here should override the section
relation everywhere and I would like to define a "background" element that covers the whole section.
Note:
I am getting the data like(section/container/elements) this and it is not going to change.
There is possible to have multiple sections each with it's own background.
.section {
width: 100%;
background-color: yellow;
}
.container {
height: 300px;
padding: 30px;
margin: 100px;
background-color: red;
}
.background {
width: 100%;
height: 100%;
}
.red {
background: red;
}
.green {
background: green;
}
<div class="section">
<div class="container">
<div class="background green" />
<div>
some content
</div>
</div>
</div>
Link to jsfiddle

Answer 1

you Should style give tag section
background-color: green;

Answer 2

You could set the position of .section to relative, and set the position of .green to absolute.
Now the position, width & height will use .section as reference.
Then you could set these properties freely.
here is the code:
.section{
position: relative;
}
.green {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
and then you may have to adjust their z-index
.green {
z-index: -1;
}
.section {
z-index: 0;
}
absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. MDN

Answer 3

One approach, with explanatory comments in the code, is as below:
/* simple reset to ensure no browser-default padding/margin exists,
and forces all element-size calculations to include border-width
and padding inside the defined width: */
*,::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.section {
/* all values here are purely aesthetic, adjust to your own
requirements: */
border: 2px solid #000;
height: 80vmin;
width: 80vmin;
margin-block: 1em;
margin-inline: auto;
}
.container {
/* here we use grid layout on the .container element(s): */
display: grid;
/* we specify one grid-column and one grid-row, each of which
take 100% of the available space: */
grid-template-columns: 1fr;
grid-template-rows: 1fr;
/* sizing the grid to be 100% of the parent's width/height: */
width: 100%;
height: 100%;
}
/* all <div> elements that are children of the .container: */
.container > div {
/* are placed in the first grid-column and first grid-row: */
grid-column: 1;
grid-row: 1;
/* specifying a max-height and max-width of 100% to address
potential overflow; obviusly adjust to your requirements: */
max-height: 100%;
max-width: 100%;
}
/* styling the element that will hold the contents (so far as your
demo shows): */
.container > div:last-child {
/* hiding overflow on x-axis: */
overflow-x: hidden;
/* allowing scrolling on the y-axis to see
overflowing content: */
overflow-y: scroll;
/* defining some white-space between the element edges and contents
within: */
padding: 0.5em;
}
.blue {
background-color: hsl(180 65% 81% / 0.5);
}
.green {
background-color: hsl(120 93% 79% / 0.5);
}
.yellow {
background-color: hsl(60 100% 50% / 0.5);
}
<div class="section">
<div class="container">
<div class="background blue" />
<div>
Some very short content
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background green" />
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat corporis hic sunt nam perferendis assumenda asperiores nobis quae consequatur aut ut quidem id, optio consequuntur ipsa labore consectetur nihil incidunt.</p>
<p>Minima quibusdam hic culpa, ea porro vitae asperiores! Vitae odit, delectus nesciunt asperiores maxime. Voluptatum velit repellendus in. Impedit laudantium asperiores nostrum neque laboriosam eius libero fugiat itaque inventore nulla?</p>
<p>Laboriosam quod, facilis ratione quas consequatur quis quisquam vel eius velit eveniet, excepturi voluptatem ea dicta quam eaque praesentium sequi illum, optio animi! Libero minima iste, maiores temporibus reiciendis repellendus.</p>
<p>Blanditiis reiciendis eveniet perspiciatis excepturi, nulla eum, rem atque. Perspiciatis quae sed autem officiis error, earum officia, nulla quod, velit deleniti pariatur. Obcaecati inventore, in adipisci eveniet, expedita a quaerat.</p>
<p>Quaerat labore vitae iure expedita eaque nostrum distinctio et, atque velit quisquam corporis animi, aut voluptatem itaque odio ipsum. Iusto asperiores eius at quos totam voluptatum, ratione voluptate cum quas.</p>
<p>Sed minima aliquid voluptatum minus dolores, iusto, ducimus doloribus! Aliquam quae, atque! Iusto nobis alias magnam minima, impedit iste illo iure illum doloremque debitis! Ipsa assumenda soluta fugiat ut esse.</p>
<p>Sint voluptatum suscipit laborum, aliquid eveniet odit blanditiis corporis voluptatibus, rem consectetur quam quidem saepe, doloremque, sit nihil rerum voluptas deleniti a expedita quo quod beatae modi. Incidunt, aliquid. Ea.</p>
<p>Minus, dicta sed maiores amet necessitatibus eaque magnam asperiores, aperiam, qui earum numquam sequi eius provident officiis. Illum fuga earum architecto nesciunt ut beatae mollitia quod sunt nulla. Ipsum, modi?</p>
<p>Eligendi, officiis maxime cupiditate consectetur voluptates est ullam odio, porro sint cum suscipit rerum nisi quibusdam non enim repudiandae facere fugiat repellendus possimus, sequi excepturi culpa iusto. Velit, sunt deleniti!</p>
<p>Ipsa deserunt dolorum molestias reiciendis. Ad dolorum eius suscipit, sapiente laboriosam dolor sequi, accusamus id consequuntur modi aliquid, architecto fuga illum non voluptatum quod. Molestiae deserunt maxime suscipit tenetur, tempora.</p>
<p>Id non fugit in vitae. Fuga voluptates sapiente, impedit atque, quasi, consequatur autem sunt dignissimos unde nam quam! Officiis quos, distinctio facilis illum explicabo incidunt quia pariatur minima, enim at.</p>
<p>Commodi consectetur repellendus ad assumenda eius voluptatibus tempora dolor et possimus quaerat aperiam nesciunt qui optio, sapiente ab libero iste, recusandae, suscipit obcaecati accusamus perferendis minus molestias. Nisi, inventore, explicabo?</p>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="background yellow" />
<div>
Some very short content
</div>
</div>
</div>
JS Fiddle demo.
References:
box-sizing.
CSS Pseudo-elements.
display.
grid-column.
grid-row.
grid-template-columns.
grid-template-rows.
hsl().
:last-child.
margin.
margin-inline.
margin-block.
max-height.
max-width.
overflow.
overflow-x.
overflow-y.
padding.
vmin.
width.