背景イメージの上にある透明な背景色を下に移動させるにはどうすればよいですか？

Question

私の問題は、画像の背景の上に半透明の背景色があることです。しかし、コンピュータの画面が大きくなり、ページが垂直に長くなると、コンテンツの終了後、背景色が水平になります。
例：background-color end before the end of the page。

私はどこでも見て、すべて（高さ：100％、高さ：100vh、底面：0、余白：0など）試しました。 100％は何もしません。100vhを使用すると、下にスクロールしたときに背景色が停止します。何もない。

私が使用しているコードはこれです。

html { 
    background: url(../images/back1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

body { 
    background-color: rgba(0, 34, 62, 0.7); 
    margin: -0.5px; 
    font-family: verdana, sans-serif; 
    color: #b9c8d4; 
    text-align: center; 
} 

に、ウェブサイト全体のコードを、外出先を参照するには、次の誰もがこの問題を解決する方法を知っている場合、私に知らせてくださいhttp://bienivitesse.com/juluwarlu/

。

Answer 1

htmlタグにメインの背景を直接適用しました。可能な限り、それを直接スタイリングすることは良いアイデアではありません。常に良い実践のために身体や直系の子孫を使用してください。

は、私はあなたがbackgroundプロパティを使用して画像の上に色を積み重ねることができないと思いますが、何を行うことができますすることです - あなたはcss pseudo-elementsを使用して青色の背景を設定することができます。

z-indexプロパティを使用すると、正しい順序で表示されるdivを取得する必要があります。そのため、色の下にも表示されません。

html { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
.container { 
 
    background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center/cover; 
 
    padding-bottom: 20rem; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.container::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 34, 62, 0.7); 
 
} 
 

 
.wrapper { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    padding: 4rem; 
 
    color: #fff; 
 
    background: purple; 
 
    z-index: 3; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="content">CONTENT</div> 
 
    </div> 
 
</div>