Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Hintergrundgrafiken für unsere Website

Im nächsten Schritt wollen wir unsere Website mit Hintergrundgrafiken versehen. Das Auge isst ja bekanntlich mit und „schön aussehen“ schadet in den meisten Fällen nicht.

Die Hintergrundgrafik sorgt dafür, dass man die 3 Spalten von unserem 3-Spalten-Layout, auch visuell wahrnimmt. Bei der Technik mit Hintergrundgrafik für „Mehr-Spalten-Layout“, spricht man auch von „faux columns“.

Die Hintergrundgrafik hat auf der Website die Bezeichnung „halbdurchsichtiger Bereich“ und wir können die Grafik direkt Herunterladen von:
http://www.fennek.mobi/durchsichtig8.png

Hintergrundgrafik mit durchsichtigen Bereichen
Hintergrundgrafik mit durchsichtigen Bereichen

Das Bild hat zum Teil durchsichtige Bereiche, damit später die dahinter gelegene Dünenlandschaft sichtbar wird.

Im nächsten Schritt benötigen wir im HTML den Bereich, in dem wir die Hintergrundgrafik hinterlegen können.

Zur Demonstration packen wir die Hintergrundgrafik in unseren schon vorhandenen DIV-Bereich wrapper um zu sehen, was passiert. Noch wird es nicht ganz perfekt sein!

#wrapper {
    background-color: #eeeeee;
    width: 900px;
    border: 2px solid red;
    margin: 0 auto;
    text-align: left; 
    background-image: url(bilder/durchsichtig8.png);   
}

Jetzt haben wir die Hintergrundgrafik integriert. Wenn wir uns das Ergebnis im Browser ansehen, sieht man deutlich zwischen der Steuerung links und dem Inhalt die Kante verlaufen. Auch unterhalb der Bilderserie, im <aside>-Bereich, sehen wir Hintergrundgrafik in grau.

Allerdings sehen wir auch oberhalb des Ohrs von der Grafik im Kopf, die Spalten. Und dort wollen wir diese nicht haben. Daher ist unser Bereich wrapper zu viel des Guten, da er ja den kompletten mittleren Bereich, mitsamt dem Kopf, umschließt.

Hintergrundgrafik für Inhalt
Hintergrundgrafik für Inhalt

Um es noch deutlicher sichtbar zu machen, wird jetzt die Dünenlandschaft für den Hintergrund des Browserfensters integriert. Auch diese kann heruntergeladen werden, unter:
http://www.fennek.mobi/bilder/1376.jpg

Nach dem Download benennen wir das Bild von „1376.jpg“ in „duene.jpg“ um.

Da dieses komplett in den Hintergrund soll, benötigen wir ein Element, das alle anderen HTML-Elemente umfasst. Da bietet sich das Element <body> an. An dieses packen wir im CSS das Hintergrundbild.

body {
    text-align: center;
    background-image: url(bilder/duene.jpg);
}

Damit im Browser das Hintergrundbild besser sichtbar wird, habe ich die Zoomfunktion im Browser genutzt (STRG und MINUS-Taste – für größer STRG und PLUS-Taste).

Hintergrundbild für Browser
Hintergrundbild für Browser

Noch sind nicht alle Bereich durchsichtig (bzw. halb durchsichtig), wie wir es im Original unter http://fennek.mobi sehen. Dazu müssen wir jetzt die Hintergrundfarbe von Bereich wrapper, steuerunglinks, aside und section herausnehmen (im Beispiel einfach deaktiviert durch /* … */)

#wrapper {
    /* background-color: #eeeeee; */
    width: 900px;
    border: 2px solid red;
    margin: 0 auto;
    text-align: left; 
    background-image: url(bilder/durchsichtig8.png);   
}
#steuerunglinks {
    /* background-color: green; */
    width: 220px;
    float: left;
}

aside {
    /* background-color: #808000; */
    width: 175px;
    float: right;
}

section {
    /* background-color: orange; */
    margin-left: 250px;
    margin-right: 195px;
}

Jetzt wird die Funktion der halb-durchsichtigen Grafik „durchsichtig8.png“ deutlich. Je nach Bereich scheint mehr oder weniger von der sich im Hintergrund befindlichen Dünenlandschaft durch.

Hintergrundgrafik durchscheinend durch teilweise transparente Grafik
Hintergrundgrafik durchscheinend durch teilweise transparente Grafik

Wichtig ist, dass der Textinhalt gut lesbar bleibt. Daher ist bei der Steuerung und im mittleren Bereich die Grafik weniger transparent.

Wichtiges Prinzip für Hintergrundgrafiken

Durch halbdurchsichtige Bereiche sind sehr schöne Effekte möglich. Dabei einfach daran denken, dass die Grafiken wie Overhead-Folien aufeinanderliegen und daher immer wichtig ist, wer tiefer liegt.

Diese transparenten Bereiche werden in der Bildbearbeitung über den Alphakanal erstellt, der in Rastergrafiken zusätzlich neben Farbinformationen die Transparenz (Durchsichtigkeit) speichert. Allerdings klappt das nicht mit jedem Format. Dafür bietet sich das Format .png an.

Hintergrundgrafik springt – also festnageln

Wenn wir bei unserem bisherigen Beispiel nach unten scrollen, bewegt sich das Hintergrundbild mit den Dünen nach oben. Das ist ein nicht wirklich übliches Verhalten von Dünen und unser Hintergrundbild ist auch nicht ewig lang.

oben sieht noch alles gut mit der Hintergrundgrafik aus
oben sieht noch alles gut mit der Hintergrundgrafik aus
Hintergrundbild scrollt unschön mit
Hintergrundbild scrollt unschön mit

Daher fixieren wir das Hintergrundbild, damit es beim Scrollen nicht mitgeht. Auch dafür gibt es in CSS eine entsprechende Anweisung background-attachment: fixed;.

body {
    text-align: center;
    background-image: url(bilder/duene.jpg);
    background-attachment: fixed;
}

Betrachten wir nun den Effekt mit dem Scrollen, bleibt der Horizont unseres Wüstenbilds stehen, auch wenn wir scrollen.

Hintergrundbild fixiert und nun immun gegen scrollen
Hintergrundbild fixiert und nun immun gegen scrollen

Ohr in den Himmel – letzte Feinheiten für das Design mit Hintergrundbildern

Letzte Feinheit im Design – das Ohr des Fenneks soll in Himmel ragen und unsere 3 Spalten sollen dort nicht sichtbar sein.

unser Original zum Vergleich mit Ohr im Himmel
unser Original zum Vergleich mit Ohr im Himmel

Also sollten wir die Hintergrundgrafik „durchsichtig8.png“ nicht in den Wrapper packen, sondern in ein Element, das den kompletten Inhalt ohne den Kopf umschließt bzw. der Wrapper sitzt falsch! Es gibt mehrere Lösungswege.

  1. Wir könnten einen weiteren DIV-Bereich erstellen, der unsere Steuerung oben und links, den Inhalt, die Bilderleiste und den Fuß umschließt und nur dieser den Hintergrund zuweisen.
  2. Wir versetzen den Wrapper und begrenzen dann die Breite vom Kopfbereich.

Ich zeige den zweiten Lösungsweg (beide sind in Ordnung)

Im HTML wird der DIV-Bereich mit Wrapper nach dem <header>-Bereich gesetzt:

<!--
<div id="wrapper">
-->
<header>
  <p id="logotext">
    <strong>Wüstenläufer</strong>
  </p>
  <p>
    <a href="kontakt.htm">Kontakt</a><br />
    <a href="impressum.htm">Impressum</a>
  </p>
</header>

<div id="wrapper">

<nav id="steuerungoben">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">Vorstellung</a>
    <li><a href="einzelteile.htm">Einzelteile</a>
  </ul>
</nav>

Das bewirkt, dass jetzt unser Fennek das Ohr frei im Himmel hat, aber noch ein zweiter Kumpel auftaucht (je nach Fensterbreite). Wir haben dem Bereich <header> die Breite geklaut.

Schwupps – der Kumpel vom ersten Fennek taucht rechts auf
Schwupps – der Kumpel vom ersten Fennek taucht rechts auf

Also rein in das CSS, die Breite und die Ausrichtung mitgeben und dann passt die Sache auch schon.

header {
    /* background-color: yellow; */
    background-image: url(bilder/wuestenlaeufer-1-ohr.png);
    height: 151px;
    width: 900px;
    margin: 0 auto;
}

Und somit haben wir unser Design für die Hintergrundgrafiken komplett.

CSS-Design für Hintergrundgrafiken komplett umgesetzt
CSS-Design für Hintergrundgrafiken komplett umgesetzt

Wenn man zum ersten Mal so ein Design macht, wundert man sich vielleicht, dass und wie manche Dinge gemacht werden. Und manch ein Kursteilnehmer sagt dann so schon „Wie soll man da selber dahinter kommen?“. Dafür gibt es das https://www.HTML-Seminar.de – und sobald man es einmal gesehen hat (und hoffentlich Schritt für Schritt mitgemacht), dann klappt das beim nächsten. Webdesign mit HTML und CSS ist nicht schwierig und es gibt nur ein paar Dinge, die man einmal gesehen/gelesen/gezeigt bekommen muss, dann klappt das bei eigenen Projekten dann auch.