スクロールバーのないサイズ変更可能な背景イメージ

Question

全画面表示時にスクロールできない静的ページを作成しようとしています。私はちょうど私のフォームを中心にし、背景イメージはウィンドウのサイズで変更します。私は初心者ですので、これが本当に明らかであればごめんなさい。

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    /* center horizontally */ 
 
    align-items: center; 
 
    /* center vertically */ 
 
} 
 
.trans { 
 
    background: rgba(1, 1, 1, 0.6); 
 
} 
 
body { 
 
    height: 100%; 
 
} 
 
.height { 
 
    height: 100% 
 
} 
 
html { 
 
    height: 100%; 
 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<div class="container height"> 
 
    <form id="form"> 
 
    <input class="trans text" type="password" name="Password"> 
 
    <button type="submit">Submit</button> 
 
    </form> 
 
</div>

Answer 1

あなたのCSSは正しいです。

* { 
    margin: 0px; 
    padding: 0px; 
    max-width: 100%; 
    box-sizing: border-box; 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

それともNormalize.css

理由を使用します。いくつかのCSSプロパティをresetingことでウェブサイトを作成

ただ、常に開始？ すべてのブラウザで独自のデフォルトCSSが提供されているため、追加する必要があります。

これがお手伝いします将来:)

Answer 2

このルール

html { 

    height: 100%; 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

} 

代わりbodyタグに適用しています

body { 
    height: 100%; 
    background: url(wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}