Größe veränderbares Hintergrundbild ohne Bildlaufleiste

Question

Ich versuche eine statische Seite zu erstellen, auf der Sie nie scrollen können, wenn Sie Vollbild sehen. Ich möchte nur mein Formular zentriert und das Hintergrundbild mit der Größe des Fensters ändern. Ich bin ein Anfänger so leid, wenn das wirklich offensichtlich ist.

.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

Ihr CSS richtig ist.

Gerade immer starten Erstellung einer Website, indem Sie einige CSS-Eigenschaften Reseting:

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

Oder Normalize.css

Warum? Da jeder Browser ein eigenes Standard-CSS bereitstellt, müssen wir dieses hinzufügen.

Dies Ihnen viel in der Zukunft helfen wird :)

Answer 2

Diese Regel

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; 

} 

hat zum body Tag statt anzuwenden:

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; 

}