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
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.
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).
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.
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.
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.
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.
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.
- 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.
- 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.
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.
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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
