• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Styling Fragen zu CSS

DerNeuling21

Mitglied
Hallo Leute,
ich bin ein Neuling wie sich an meinem Namen schon ablesen lässt. Ich habe den Thread von fasheras angeschaut und versucht das nachzumachen bzw. das Problem zu lösen. Habe es leider nicht geschaft und hätte dazu ein Paar Fragen.

1. Ist es möglich das der Hintergrund zu 100% angezeigt. wird ? Ich verwende ein Bild das mehr als 1080p hat und somit größer als die Pixel auf meinem Bildschirm. Zudem sieht das Bild auf FireFox extrem komisch aus.

2. Ich habe den verlinkten Beitrag von Aaron3219 "https://css-tricks.com/snippets/css/a-guide-to-flexbox/" und blicke auch nicht ganz durch. Mit welchen Befehlen ist es denn jetzt möglich die Box in das "center" des Bildschirms auszurichten und den Inhalt der Box auch Zentral auszurichten ?

Bei meinem Versuch kam es nicht auf das Styling sondern auf die Funktion an.

Bitte eine ziemlich genaue erklärung, weil noch am lernen bin und am Anfang stehe.

http://www.bilder-upload.eu/show.php?file=a4bede-1505495929.png

Hier mal der Code:

Code:
<html>

<head>
    <title>Test</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    </head>

<boady>
    
    <div class="container">
            <form>
                    <input type="text" name="Benutzername" maxlength="20" id="username" value class="Benutzername" placeholder="Benutzername">
                    <br class="clear">
                    <input type="password" name="Passwort" maxlength="20" id="password" value class="Passwort" placeholder="Passwort">
                    <br>
                    <input type="submit" class="button" value="Anmelden" style="width: 200px;">
            </form>
        </div>
        
    
    </boady>

</html>

Code:
body{
    
    background-image:url(Battlefield%201.jpg);
    background-repeat:no-repeat;
    background-position:center;
    
}

.container{
    
    display: flex;
    justify-content: center;
    width: 300px;
    height: 300px;
    background-color: forestgreen;
}

input{
    
    margin-top: 14px;
    height: 40px;
    width: 280px;
    
}

.button{
    
    background-color:black;
}
 
Werbung:
Zurück
Oben