CSS Align image below paragraph - image

Question

I'm trying to align the image below the Benefits paragraph but for some reason it won't allow me to position it there. I used background-position: % %; When I change it to be more lower than the paragraph, my image hides and when I give the section more height, The image isn't showing aswell.
I am only allowed to use CSS (so need to work with css background properties, and not HTML for this project.
/*derde section*/
.participation h3 {
font-family: fraktur;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #4A4A4A;
text-align: left;
}
.participation {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
/* border: 2px solid #000000; */
background-image: url('../images/peace.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 13% 82%;
justify-items: end;
}
.participation p {
width: 47%;
margin: 15px 40px;
}
.benefits h3 {
font-family: baskerville;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #000000;
text-align: left;
}
.benefits {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
background-image: url('http://thomasdebelder.be/zengarden%20website//images/kop2.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
justify-items: end;
}
.benefits p {
width: 47%;
margin: 15px 40px;
}
/*einde derde section*/
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>

Answer 1

You can add a big padding to the section at the bottom and adjust the background like this :
/*derde section*/
.participation h3 {
font-family: fraktur;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #4A4A4A;
text-align: left;
}
.participation {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
/* border: 2px solid #000000; */
background-image: url('../images/peace.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 13% 82%;
justify-items: end;
}
.participation p {
width: 47%;
margin: 15px 40px;
}
.benefits h3 {
font-family: baskerville;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #000000;
text-align: left;
}
.benefits {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
background-image: url('http://thomasdebelder.be/zengarden%20website//images/kop2.png');
background-repeat: no-repeat;
background-position: 73% 100%;
justify-items: end;
padding-bottom: 400px;
}
.benefits p {
width: 47%;
margin: 15px 40px;
}
/*einde derde section*/
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>

Answer 2

One option would be add a padding-bottom to the h3 element to give room for the background image. Like this:
/*derde section*/
.participation h3 {
font-family: fraktur;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #4A4A4A;
text-align: left;
}
.participation {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
/* border: 2px solid #000000; */
background-image: url('../images/peace.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 13% 82%;
justify-items: end;
}
.participation p {
width: 47%;
margin: 15px 40px;
}
.benefits h3 {
font-family: baskerville;
font-weight: 100;
font-size: 10em;
width: 50%;
color: #000000;
text-align: left;
padding-bottom: 100%;
}
.benefits {
/* width: 80%; */
display: grid;
grid-template-columns: 1fr;
margin: 50px auto;
background-image: url('http://thomasdebelder.be/zengarden%20website//images/kop2.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right 60%;
justify-items: end;
}
.benefits p {
width: 47%;
margin: 15px 40px;
}
/*einde derde section*/
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>