背景の背景の空白

Question

この背景イメージの上にある空白は何ですか？私はちょっと内側の内容でフロートを使って修正することができます。また、この例では表示されませんが、コンテンツを垂直に合わせるためにバックグラウンドイメージをどのように伸ばすのかを教えてもらえれば分かるはずです。おかげ

<div class="welcome-section"> 
     <div class="welcome-content-wrap"> 
      <img src="images/welcomeTransparent.png"> 

      <p><span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 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.</p> 
      <p>All our fish is sourced from sustainable sources.</p> 
      <p>We cook fish to order so that it isn't left to dry out under lights,<br> like in too many chip shops.</p> 
      <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 

      <img id="image-m" src="images/shutterstock_164403170.jpg"> 
      <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
      <img id="image-r" src="images/CSSMSClogo.png"> 
     </div> 
    </div> 

.welcome-section{ 
    background-image: url("https://static.pexels.com/photos/5412/water-blue-ocean.jpg"); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    display: block; 
    /*float: left;*/ 
} 

.welcome-content-wrap{ 
    margin: 0 auto; 
    width: 800px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

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

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

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

https://jsfiddle.net/kfj5ucL0/

Answer 1

空白はあなたが設定したマージンによって引き起こされます。

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 50px auto; /* <-- here */ 
} 

クラスにmin-height: 100vh;を追加してみてください縦にカバーするためにストレッチするには

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

を試してみてください。

Answer 2

はまた、それは、この例では表示されませんが、私は垂直方向にそれが認識されるであろう内容に合わせて背景画像のストレッチになるだろう、私の方法を伝えることができます。

使用background-size: cover;

Answer 3

<div class="welcome-section"> 
     <div class="welcome-content-wrap"> 
      <img src="img/anywhere.png"> 

      <p><span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 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.</p> 
      <p>All our fish is sourced from sustainable sources.</p> 
      <p>We cook fish to order so that it isn't left to dry out under lights,<br> like in too many chip shops.</p> 
      <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-m" src="images/shutterstock_164403170.jpg"> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
     </div> 
     <div class="welcome-content-wrap"> 
      <img id="image-r" src="images/CSSMSClogo.png"> 
     </div> 
    </div> 
<style> 
.welcome-section{ 
    background-image: url("https://static.pexels.com/photos/5412/water-blue-ocean.jpg"); 
    background-size: 100% 555px; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
    display: block; 
    float: left; 
} 

.welcome-content-wrap{ 
    margin: 0 auto; 
    width: 800px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

.welcome-content-wrap img{ 
    display: block; 
    width: 50%; 
    margin: 0px auto; 
    margin-bottom:10px; 
} 

.welcome-content-wrap p{ 
    color: #fff; 
} 

.text-style{ 
    font-family: outstanding; 
    font-size: 0.75em; 
} 
</style>