背景画像の配置、全幅、ブラウザの高さ100％、複数のセクション、パディングの問題

-4

ウェブサイトの背景のコードを記述しています。目標は、1）最初の画像のブラウザウィンドウの100％の高さ2）画像はウィンドウの中央に残っており、側面は切り取られています。3）ホームページには、同じ効果が必要な2つの追加画像もあります。別のコードチャンクを試して書き、どこにもいない。私はちょうど別の部分を破る一部を得ることができます。任意のassistnaceCurrentコードチャンクをありがとう次のとおりです。背景画像の配置、全幅、ブラウザの高さ100％、複数のセクション、パディングの問題

<html> 

<head> 
    <meta charset="UTF-8"> 

    <title>Background Image</title> 

    <style> 

     * { margin: 0; padding: 0; } 

     .background { 
      background: no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 

    </style> 

</head> 

<body> 
    <div class="background"> 
     <img src="images/bg.png"> 
    </div> 
    <div class="background bg2"> 
     <img src="images/bg2.png"> 
    </div> 
</body> 

</html>

出典

2017-05-23 zack83

私は完全にあなたの質問が何であるかを理解するかどうかわからないが、あなたのイメージのために

.background { 
    background-image: url(images/bg.png); 
    height: 100vh; 
}

それに必要なウィンドウの高さを取得します背景画像は常にビューポートの高さ全体を使用します。質問の残りの部分についてはわからないtho！

出典

2017-05-23 18:16:34 kellyhax

あなたがしようとしていることを理解していれば、コードに間違ったことがいくつかあります。最初に私はいくつかのことを説明し、次にそれを試したときに思いついたコードを提供します。ここに行く...

まず、 ".background："があるスタイル要素では、あなたが書いたコードは必要ありません。 Webkit、mozなどの言葉には、ブラウザ間の互換性の問題があるかもしれません。 background-sizeはあなたが心配しなければならないものの一つではありません。私があなたの「バックグラウンド」クラスに入れる唯一のものは、幅と高さが100％です。

第2に、幅と高さについて言えば、「html」と「body」要素を含め、幅と高さの両方を100％にします。

第3に、あなたのイメージをあなたのhtmlに掲載しようとしていますが、cssがそれらを作成しているかのようにイメージをスタイルしようとしています。どのように私のhtmlで私は "バックグラウンド" divsを空のままにして、CSSの写真のURLを含めることに注意してください。

一言で言えば、実際には異なるアプローチを融合させているため、どの方法をいつどこで使うべきかについて少し混乱するかもしれないと思います。つまり、ここに書いたコードは...

<!DOCTYPE html> 

<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>Background Image</title> 
    <style> 

     * { margin: 0; padding: 0; } 

     html, body { 
      width: 100%; 
      height: 100%; 
     } 

     .background { 
      width: 100%; 
      height: 100%; 
     } 

     #bg1 { 
      background: url(images/bg.png) no-repeat center; 
      background-size: cover; 
     } 

     #bg2 { 
      background: url(images/bg2.pngg) no-repeat center; 
      background-size: cover; 
     } 

    </style> 
</head> 

<body> 
    <div class="background" id="bg1"> 
    </div> 
    <div class="background" id="bg2"> 
    </div> 
</body> 

</html>

ここにあなたを助けるかもしれないリンクがあります。彼らは偉大な指示、演習とチュートリアルを持っています：w3schools.com

すべてのことがザックに役立つことを願っています！ :)

出典

2017-05-23 18:39:06

背景画像の配置、全幅、ブラウザの高さ100％、複数のセクション、パディングの問題

答えて

関連する問題