So I've been trying to add an image to a row in Bootstrap 4. The problem is it's only taking up a square of the section instead of the entire row. I believe I've done it before but I can't remember how I did it (of course). I figured this would be fairly simple to accomplish but I guess not. Here is my code so far:
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
#bg-img {
background-color: #E6F1FF;
background-image: url('http://placekitten.com/600/800');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 20%;
background-size: cover;
color: #323840;
height: 1148px;
}
.value-heading {
color: #323840;
text-align: center;
font-size: 34px;
font-family: 'Inter-SemiBold', Arial, sans-serif;
font-weight: 600;
line-height: 41.15px;
}
.value-description {
font-family: 'Inter-Regular', Arial, sans-serif;
color: #323840;
text-align: center;
font-size: 24px;
line-height: 36px;
}
.section-heading {
color: #043B7C;
text-align: center;
font-size: 46px;
font-family: 'Inter-Medium', Arial, sans-serif;
font-weight: 500;
line-height: 60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div >
<div id="bg-img">
<div >
<h1 >header</h1>
</div>
<div >
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
</div>
<div >
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
<!-- /.row -->
</div>
</main>CodePudding user response：
I didn't get your question well but if you are asking about the background why it's not taking the whole section I believe that happens because you choose a portrait image you have to use a landscape one
background-image: url(https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg);CodePudding user response：
If you want the background image to be on the row class then put it in there instead of putting it in your id element bg-img. Check the snippet below for reference.
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
.row {
background-color: #E6F1FF;
background-image: url('http://placekitten.com/600/800');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 20%;
background-size: cover;
color: #323840;
height: 1148px;
width: 100%;
}
.value-heading {
color: #323840;
text-align: center;
font-size: 34px;
font-family: 'Inter-SemiBold', Arial, sans-serif;
font-weight: 600;
line-height: 41.15px;
}
.value-description {
font-family: 'Inter-Regular', Arial, sans-serif;
color: #323840;
text-align: center;
font-size: 24px;
line-height: 36px;
}
.section-heading {
color: #043B7C;
text-align: center;
font-size: 46px;
font-family: 'Inter-Medium', Arial, sans-serif;
font-weight: 500;
line-height: 60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div >
<div id="bg-img">
<div >
<h1 >header</h1>
</div>
<div >
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="http://placekitten.com/200/300" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
</div>
<div >
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
<div >
<img src="#" alt="Generic placeholder image" width="200" height="200">
<h2 >header</h2>
<p >info</p>
</div>
<!-- /.col-lg-4 -->
</div>
</div>
<!-- /.row -->
</div>
</main>