I am facing an issue with two non-nested sections, both containing background images. One of the sections displays the background image, while the other does not. The section that does not display is not taking up any space despite having a specified height. Interestingly, when I add content to it, the background image shows up but only at the height of the content. This leads me to believe that the problem is not with the background image itself. Both sections contain no content except for an absolutely positioned item (which the browser does not consider as content). The section that displays correctly is within a regular div, whereas the one with issues is inside a flexbox. I'm puzzled about why this difference in container type is affecting the display.
After researching online and on Stack Overflow, I found solutions recommending either checking the path of the background image or ensuring the element has a specified height. I have already taken care of these requirements in both sections (barring any typos), yet the issue persists. Could there be a hidden typo causing this frustration? It's frustrating to be stuck on what should be a simple task, and a fresh set of eyes could provide valuable insight.
The following code works as intended:
<section class="headingImg">
<p class="container headerText">
Increase your home's value<br />and enhance your lifestyle
</p>
</section>
Related styles. The Container class attribute originates from Bootstrap and is not defined in the CSS file.
.headerText {
text-shadow: 2px 2px 2px #222;
color:#f4e9da;
font-size:36px;
padding-top:235px;
font-style:italic;
line-height:36px;
}
.headingImg {
background-image:url('images/browndeck.jpg');
background-position: center;
background-repeat:no-repeat;
background-size:cover;
height:350px;
margin-bottom:40px
}
This code snippet is not functioning due to the absence of height in the section containing the background image:
<div class="container">
<section class="flex">
<div class="flexDiv bgColor">
<section id="kitchens" class="imgBoxSize cover relative">
<h2 class="absCenter">Kitchens</h2>
</section>
<p>Enhance the lifestyle of your mice, cockroaches, and flies</p>
</div>
</section>
</div>
Related styles:
.bgColor{
background-color:white;
}
.flex {
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
.flexDiv {
background-color:#CCC;
width:30%;
margin:0 auto;
}
#kitchens {
background-image:url("images/kitchen1.jpg");
background-repeat:no-repeat;
}
.imageBoxSize {
height:200px;
width:100%
}
.cover {
background-size:cover;
background-position:center;
}
.relative {
position:relative
}
.absCenter {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
}