我试图将图片与优惠段落对齐，但出于某种原因，它不允许我在那里定位。我使用了背景位置：%%;当我将它更改为比段落更低时，我的图像会隐藏，当我给出更高的部分时，图像也不显示。
我只允许使用CSS（因此需要使用css背景属性，而不是此项目的HTML。
/*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 <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> 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 <a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a> 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. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> 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>
答案 0 :(得分：1)
您可以在底部的部分添加一个大填充，并调整背景，如下所示：
/*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 <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> 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 <a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a> 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. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> 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>
答案 1 :(得分：0)
一个选项是在padding-bottom元素中添加h3，为背景图片提供空间。像这样：
/*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 <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> 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 <a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a> 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. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> 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>