背景の高さはコンテナに自動的に調整されません

Question

固定背景とグラデーションオーバーレイを使用してテキストを読み込むことができるように、私のウェブページに1つのセクションが必要です。問題は、背景がトップ10ピクセルかそのようなものだけをカバーすることです。高さはコンテナのサイズに自動調整されません。高さ：200pxなどの場合は動作しますが、コンテンツに自動調整するのが好きです。

それは背景のちょうど小さなバーで、次のように示しています（スニペットを参照）

.random { 
height:auto; 
background: linear-gradient(rgba(141, 153, 174, 0.8), 
rgba(141, 153, 174, 0.5)), 
url(https://static.pexels.com/photos/196652/pexels-photo-196652.jpeg) 
no- 
repeat fixed; 
background-size: cover; 
} 

Answer 1

あなたが提供されたコードが作業を行います。Picture

HTML：

<section id="random" class="random"> 
<div class="content-wrap"> 


<div class="col-50-1"> 
<h2>Festivals</h2> 
<p> 
Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut 
purus. Mauris consectetur posuere ante, ullamcorper iaculis enim interdum 
vulputate. Duis finibus neque lectus. Nullam ligula libero, facilisis eget 
suscipit mi ullamcorper. Fusce ut sodales velit. Phasellus auctor ligula 
</p> 
</div> 

<div class="col-50-2"> 
<h2>Uitgaan</h2> 
<p> 
Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra 
fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut 
Fusce ut sodales velit. Phasellus auctor ligula est. 
</p> 
</div> 
</div> 
</section> 

CSS 。画像をもとに、あなたはおそらく干渉している他のいくつかのコードを持っている場合、私はあなたが

.content-wrap { 
    background: #fff; 
} 

を持っている、特に場合は、疑問に思うけれども、私もそれを確認するためにbackground-originとbackground-position宣言で遊んでたいです画像の位置は、それが背後にあるはずの領域に関して正しい。

.random { 
 
    height:auto; 
 
    background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url(https://static.pexels.com/photos/196652/pexels-photo-196652.jpeg) no-repeat fixed; 
 
    background-size: cover; 
 
}

<section class="random" id="random"> 
 
    <div class="content-wrap"> 
 
    <div class="col-50-1"> 
 
     <h2>Festivals</h2> 
 
     <p>Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut purus. Mauris consectetur posuere ante, ullamcorper iaculis enim interdum vulputate. Duis finibus neque lectus. Nullam ligula libero, facilisis eget suscipit mi ullamcorper. Fusce ut sodales velit. Phasellus auctor ligula</p> 
 
    </div> 
 
    <div class="col-50-2"> 
 
     <h2>Uitgaan</h2> 
 
     <p>Donec in iaculis velit, eu viverra leo. Nullam eleifend, dolor at pharetra fringilla, eros est fermentum velit, rutrum vestibulum massa ligula ut Fusce ut sodales velit. Phasellus auctor ligula est.</p> 
 
    </div> 
 
    </div> 
 
</section>