使背景图像与动态文本对齐

Question

I have a quote generator and I am simply trying to place a background image behind the dynamic text. That way the text looks likes it is inside the quotes. I cannot get this to properly align no matter what I do. I know its a matter of having different parts in divs and adjusting the css, but its not working. Is there a different approach.

 <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

Here is one way of doing it setting the parent element to the size of the background image, then using absolute positioning to center the quote over the image. This will ensure the text overlays the image, and the background image is never stretched.

 #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> 

And here's a more adaptive way to do it without a fixed width/height, and using a padding to make sure the parent's aspect ratio is proportional to the background image, and stretching the background image to the size of the parent using background-size: 100% 100%; . This is better because the quote box can be whatever size you want it to be, but comes with the downside of the image appearing stretched if you stretch the quote box beyond the size of the image.

 #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=""/> 

Answer 2

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

 <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> 

I would cut the image apart (as I have done here), use FLEXBOX and play with the paddings/margins/etc.