高さ50％中央の背景イメージと残りのスペースは背景色

私は、ユーザーの高さサイズの上位50％のサイズを背景にしたいと思っています。 50％の高さ。残りの50％以上（コンテンツの高さが100％以上の場合）は、背景色にする必要があります。高さ50％中央の背景イメージと残りのスペースは背景色

例：

は、これは私がこれまで持っているものです。

html{ 
 
    height: 100%; 
 
} 
 
body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #e1e1e1; 
 
} 
 
#wrapper{ 
 
    width: 100%; 
 
    height: 50%; 
 
    background: url('http://wallpaper-gallery.net/images/wallpaper-black-and-white/wallpaper-black-and-white-7.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 
#content{ 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    background-color:white; 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="content"> 
 
     <p> 
 
     Lorem Ipsum Dolar 
 
    </p> 
 
    </div> 
 
    </div> 
 
</body>

JSFiddle：https://jsfiddle.net/aL7devux/6/

私は、これは権利ではありません知っています。まず第一に、イメージは中央に配置されていません。コンテンツがユーザーのブラウザの高さの100％を超えた場合、動作しないhtml + bodyの高さは100％になっています。また、私は高さの50％に#Wrapperを載せていますが、どちらも正しくありません。それは背景画像にのみ適用するべきです。

私はこれをどのように達成する必要がありますか？

出典

2017-05-17 user2192013

あり、これを行うには多くの方法がありますが、ここではあなたのアプローチを考慮すると、これは最も簡単なものです：

もう一度

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #e1e1e1; 
 
} 
 

 
#wrapper { 
 
    width: 100%; 
 
    background: url('http://wallpaper-gallery.net/images/wallpaper-black-and-white/wallpaper-black-and-white-7.jpg') no-repeat center 240%, #858585; 
 
    padding-top: 2rem; 
 
} 
 

 
#content { 
 
    width: 60%; 
 
    height: 700px; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="content"> 
 
     <p> 
 
     Lorem Ipsum Dolar 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

は、これはあなたのアプローチに合うように作られ、そこにありますあなたがこれに取り組むことができるいくつかの他の方法。

すべてのプロパティは、目的に合うように作成されています。例えば、背景画像に対して250％のYオフセットを見ることができます。この場合は、背景の上にうまく収まるイメージを作成する必要があります。そのため、負のオフセットは必要ありません。

出典

2017-05-17 12:57:02 snkv

更新しますか？また、html + bodyを100％としています。そしてコンテンツも60％に限定されていますが、これは私が探しているものではありません – user2192013

私はあなたを完全に理解しているかどうかわかりません。あなたは何もない値のパーセンテージを持つことはできません。つまり、親の値が必要です。私が設定した900pxの高さは、表示上の理由からです。あなたのコンテンツは、それを横切って広がり、それを広げます。 – snkv

ここに更新コードがあります。私はちょうどあなたのCSS

html{ 
 
    height: 100%; 
 
} 
 
body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #e1e1e1; 
 
} 
 
#wrapper{ 
 
    width: 100%; 
 
    height: 50%; 
 
    background: green url('http://wallpaper-gallery.net/images/wallpaper-black-and-white/wallpaper-black-and-white-7.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: 100% 40%; 
 
    -moz-background-size: 100% 40%; 
 
    -o-background-size: 100% 40%; 
 
    background-size: 100% 40%; 
 
    background-position: top center; 
 
} 
 
#content{ 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    background-color:white; 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="content"> 
 
     <p> 
 
     Lorem Ipsum Dolar 
 
    </p> 
 
    </div> 
 
    </div> 
 
</body>

内容が100％の高さを超える場合はどうすれば

出典

2017-05-17 13:07:50 Muzamil301

高さ50％中央の背景イメージと残りのスペースは背景色

答えて

関連する問題