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

Frage Fullscreen Background (Anfänger)

Doss

Neues Mitglied
Hallo leute,

ich bin gerade dabei mir eine kleine "Landing Page" mit nem Fullscreenbackground und einer Registerbox zu erstellen, desweiteren sollte man dann runterscrollen können wo ich noch einen Text zu sehen bekomme.. Ich habe mich schon eingelesen möchte, möchte nun aber mal etwas in die Praxis umsetzen..

Aus einem Tutorial habe ich folgendenen Code HTML Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="default.css"/>
</head>
<body>
<header>
  <!-- <h1>Hello Clarice</h1>
  <h3>It's so nice to see you again</h3>-->
</header>
<p>Ut In Nulla Enim. Phasellus Molestie Magna</p>
</body>
</html>

Dazu der CSS Code:
Code:
header {
  height: 100vh;
  background: url(img/2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

p {
  width: 600px;
  margin: 0 auto 20px;
}

Wenn ich die index.html aufrufe, gefällt mein rein theoretisch die Basis auf der ich aufbauen möchte, nur 1. ist beim fullsized Background oben und an den Seiten ein weißer Rand, dieser eigentlich nicht da sein sollte.

Das zweite wäre dann, ist es klug mein Background Bild als "Header" zu verwenden? Schließlich ist das doch eher mein Body? Ich klinge jetzt vielleicht wie jemand der heute erst HTML entdeckt hat, aber ich möchte halt sichergehen.

Vielleicht könnt ihr mir ja Tipps geben zum Aufbau der Struktur, eventuell möchte ich in Zukunft noch eine Navigationsbar ganz oben einfügen, aber erstmal klein anfangen :).
 
Unerwünschte Ränder zurücksetzen:
CSS:
 * {margin:0;padding:0} /* Zu Beginn des Stylesheets notieren */
 
Zuletzt bearbeitet:
Zurück
Oben