垂直拉伸div以适合内容

如何使.welcome-content-wrap类拉伸以适应其内容并仍保持我给出的透明样式？垂直拉伸div以适合内容

我明白，你通常不会添加背景图片像我有但就是为什么我做它像我有一个理由

.welcome-section{ 
 
\t position: relative; 
 
} 
 

 
.welcome-background{ 
 
\t max-width: 100%; 
 
\t display: block; 
 
\t height: auto; 
 
} 
 

 
.welcome-content-wrap{ 
 
\t position: absolute; 
 
\t top:10%; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 10%; 
 
\t margin: 0 auto; 
 
\t max-width: 800px; 
 
\t background: rgb(0, 0, 0); 
 
\t background: rgba(0, 0, 0, 0.7); 
 
\t text-align: center; 
 
} 
 

 
.welcome-content-wrap img{ 
 
\t display: block; 
 
\t width: 50%; 
 
\t margin: 50px auto; 
 
} 
 

 
.welcome-content-wrap p{ 
 
\t color: #fff; 
 
\t margin: 25px; 
 
} 
 

 
.text-style{ 
 
\t font-family: outstanding; 
 
\t font-size: 0.75em; 
 
}

<div class="welcome-section"> 
 
\t <img class="welcome-background" src="images/menuBackground.jpg"> 
 
\t <div class="welcome-content-wrap"> 
 
\t \t <img src="images/welcomeTransparent.png"> 
 
\t 
 
\t \t <p> 
 
\t \t \t <span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 
 
\t \t \t Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day. 
 
\t \t </p> 
 
\t \t <p>All our fish is sourced from sustainable sources.</p> 
 
\t \t <p> 
 
\t \t \t We cook fish to order so that it isn't left to dry out under lights,<br> 
 
\t \t \t like in too many chip shops. 
 
\t \t </p> 
 
\t \t <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 
 
\t 
 
\t \t <img id="image-m" src="images/shutterstock_164403170.jpg"> 
 
\t \t <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
 
\t \t <img id="image-r" src="images/CSSMSClogo.png"> 
 
\t </div> 
 
</div>

来源

2017-03-08 Reece Barrett