Bannergrafik über die ganze Breite des Bildschirms

lumpidumpi · 30.10.2015

Hallo!
Ich versuche mich gerade an einer Webseite mit html, css und etwas jquery auf meinem lokalen Computer. Dabei möchte ich ein Banner hin bekommen, wie bei:
illustratoren.de

zum Beispiel.
Dass Banner soll über die ganze Seite gehen und immer gleich sich auch Änderungen der Fenstergröße anpasst.

Wie bekomme ich sowas hin?

patrick_l · 30.10.2015

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="topbar"></div>
    <header role="banner" class="teaser">
      <div class="teaser-inner"></div>
    </header>
  </body>
</html>

CSS:

.topbar {
  width: 100%;
  height: 60px;
  background-color: #ededed;
}

.teaser {
  width: 100%;
  height: 300px;
  background-color: skyblue;
  padding: 10px 0;
}
.teaser-inner {
  max-width: 800px;
  height: 290px;
  border: 5px solid blue;
  margin: 0 auto;
}

Hier nochmal in Aktion:
-

Liebe Grüße, Patrick

lumpidumpi · 03.11.2015

Hallo patrick_I

Danke für Deinen Code!

Was ich wollte ist aber das der Container .teaser mit der Background-Color ein Bild enthält, was über die ganze Seite gespannt ist und responsive mit geht. Hm, ich hatte jetzt die Tage versucht das zu probieren, aber bin noch nicht weiter gekommen.

Gruß lumpi