背景イメージを動的テキストと整列する

Question

引用符ジェネレータがあり、単に動的テキストの背後に背景イメージを配置しようとしています。そうすることで、テキストは見た目の中で好きなように見えます。私が何をしていても、これを適切に調整することはできません。私はdivの異なる部分を持ち、CSSを調整するということを知っていますが、動作しません。別のアプローチがありますか？ここで

<style> 
 
#allTogether{ 
 
margin-top:60px; 
 
padding-left:-100px; 
 
width:400px; 
 

 

 
} 
 
#quote{ 
 
margin-top:-40px; 
 
width:380px; 
 
height:100px; 
 
font-size:18px; 
 
} 
 

 
#bunch{ 
 
margin-left:200px; 
 
} 
 
</style>

<div id="bunch"> 
 
<div id="allTogether"> 
 
<div id="quote" > 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
</div> 
 
</bunch> 
 
<br> 
 

 
<img src="https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png"/>

Answer 1

.allTogether { 
 
\t display: flex; 
 
\t height: 400px; 
 
\t width: 500px; 
 
} 
 
.allTogether div { 
 
\t align-self: auto; 
 
\t margin: auto; 
 
} 
 
.quote { 
 
\t padding-top: 40px; 
 
\t 
 
}

<div class="allTogether"> 
 
    <div><img src="http://seanrawles.work/scoopzilla/left_quote.png" /></div> 
 
    <div> 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script>  
 
    </div> 
 
    <div><img src="http://seanrawles.work/scoopzilla/right_quote.png" /></div> 
 
</div>

私は、（私はここで行ったように）離れて画像をカットFLEXBOXを使用し、パディング/マージンの/ etcと遊ぶでしょう。

Answer 2

画像上の引用を中心に絶対位置を使用して、その後、背景画像のサイズに親要素を設定し、それを行うための一つの方法です。これにより、テキストがイメージにオーバーレイされ、背景イメージが拡大されることはありません。

#bunch { 
 
    width: 700px; 
 
    height: 197px; 
 
    background: url('https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png') top center no-repeat; 
 
    position: relative; 
 
} 
 
#quote { 
 
    position: absolute; 
 
    left: 150px; 
 
    right: 150px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
}

<div id="bunch"> 
 
    <div id="quote" > 
 
    <script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
    </div> 
 
</div>

そして、ここで一定の幅/高させずにそれを行うために、より適応方法だ、と親のアスペクト比が背景画像に比例していることを確認するためのパディングを使用して、延伸背景画像をbackground-size: 100% 100%;を使用して親のサイズに合わせる。これは、引用ボックスがどんな大きさでもかまいませんが、画像のサイズを超えて引用ボックスを引き伸ばすと伸びて見える画像の下側が付いてくるのでより優れています。

#bunch { 
 
    height: 0; 
 
    padding-bottom: 28.14%; 
 
    background: url('https://www.thesenaseproject.org/wp-content/uploads/2015/10/quotation_marks.png') top center no-repeat; 
 
    background-size: 100% 100%; 
 
    position: relative; 
 
} 
 
#quote { 
 
    position: absolute; 
 
    left: 20%; 
 
    right: 20%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    text-align: center; 
 
}

<div id="bunch"> 
 
<div id="allTogether"> 
 
<div id="quote" > 
 
<script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"></script> 
 
</div> 
 
</bunch> 
 
<br> 
 

 
<img src=""/>