Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Meine erste Website

Den Hintergrund gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mithilfe eines Hintergrundbilds kann ein Blickfang erzeugt und der Webseite zusätzlicher Charakter verliehen werden.
07:03

Transkript

Eine Möglichkeit, um meinen ausgesprochen schlichten Design noch etwas mehr Pepp zu verleihen, ist der, dass ich mich um ein Hintergrundbild kümmere. Und gesagt getan, wollen wir jetzt eins meiner Bilder hier als Hintergrund einfügen. Den Hintergrund füge ich in meiner CSS-Datei ein, und zwar werde ich dem Body-Tag also dem Element, das den gesamten Bildschirm umfasst, dieses Bild als Hintergrundbild zuordnen. Das heißt, das Element, das jetzt das Bild bekommen soll, ist Body, und auch der braucht seine geschwungenen Klammern und dann sage ich eigentlich nur noch background-image und muss jetzt eine oder möchte jetzt eine URL angeben. So, das ist jetzt, was die Pfadangabe anbelangt, so eine kleine Spezialität. Es geht nämlich um Folgendes. Dadurch dass wir in unserer Main-CSS stehen, sind wir innerhalb des Verzeichnisses CSS, und müssen erst aus diesem Zeichnis heraus um dann in das Verzeichnis-Image hineingehen zu können. Das Herausspringen aus einem bestehenden Verzeichnis wird mit zwei Punkten symbolisiert. Dann brauche ich einen Slash und jetzt wird mir schon zum Beispiel mein Image-Verzeichnis vorgeshlagen, und ich möchte meinen Weg als Bild haben. Soviel dazu. Es ist zwar so, dass dieses Bild groß genug sein sollte. Aber um irgendwelche unbeliebten Wiederholungen vorzubeugen, werde ich einen background-repeat mit no repeat setzen. Und wenn ich mir mein Bild hier so anschaue, ich werde schnell neuladen, damit dieser Rahmen wegfällt, dann sehe ich im Moment hauptsächlich Himmel. Das ist nicht unbedingt das, was ich möchte. Ich kann aber meinem Bild auch noch sagen, welche Teile des Bildes im Zentrum liegen sollen. Also sage ich background-position und der Position weise ich Center zu. Und dann habe ich hier eigentlich alles, was ich brauche. Gut, mit diesem paar Zuweisungen habe ich jetzt geschafft, dass ich hier ein Bild als Hintergrund anbringen konnte, das im Moment, je nachdem wie es vergrößert oder verkleinert wird immer einen bestimmten Ausschnitt meines Bildes darstellt. Wenn ich diesen Ausschnitt nicht haben möchte, sondern zum Beispiel immer möchte, dass das Bild den gesamten Bildschirma ausfüllt, habe ich eine Möglichkeit über background-size auch dieses genauer anzugeben, wobei hier das gängigste Background Size Cover ist. Ich sage also background-size und werde den Wert Cover zuweisen. Damit erreiche ich das gesamte Bild dargestellt wird, ohne dass es großartig verzerrt wird. Und hier habe ich jetzt also mein gesamtes Bild und hier habe ich meinen Ausschnitt, und es sieht eigentlich immer sehr gut aus und wie gesagt, braucht den ganzen Bildschirm. Wenn ich jetzt mein Hintergrundbild so weit habe, dann merke ich, dass ich hier aber noch ein kleines Problem mit der Darstellung habe, denn der Text ist jetzt nicht mehr gut lesbar. Das heißt, ich werde mich jetzt noch ein bisschen um weitere Verfeinerungen in meinem Wrapper kümmern müssen. Ich werde also mich erstmal um Hintergrundfarbe für meinen Wrapper kümmern, indem ich sage background-colour und in bewährter Weise fange ich mal mit White an. Das sieht jetzt aber sehr plump aus, und was sehr schön wäre, wäre wenn eigentlich der Hintergrund etwas durchscheinen kann. Da gibt es zwei Ansätze, wie ich das Problem lösen kann. Ein Ansatz wäre der, dass ich mit Opacity arbeite. Das zeige ich Ihnen, aber das birgt ein kleines Problem. Ich kann jetzt also sagen, dass ich sozusagen die Durchsichtigkeit meines Elements erhöhe, und wenn ich jetzt als Opacity zum Beispiel 0,9 angebe, dann sehen Sie, dass es hier schon leicht durchscheint. Wenn ich 0,6 angebe, scheint es noch viel mehr durch. Aber Sie können gleichzeitig auch das Problem mit Opacity erkennen. Nämlich, Opacity bezieht sich auf mein gesamtes Element, das heißt auch meine Schrift wird schlechter lesbar und alles wird diesiger. Um das aber zu vermeiden, gibt es eine Möglichkeit, dass ich mir die Hintergrundfarbe in einem anderen Farbraum anzeigen lassen kann und dann auch mit einem Alpha-Kanal. Der Alpha-Kanal ist für diese Transparenz zuständig, und das heißt, wenn ich jetzt stattdessen bei der Background-colour sage dass im RGBA-Farbraum arbeiten möchte, dann muss ich hier jetzt in runden Klammern noch die Farbwerte angeben. 255 255 255, und dann vielleicht noch eine Transparenz von 0,8 sorgt jetzt dafür dass mein Text noch gut dargestellt wird, dass aber der Hintergrund ganz leicht durchscheint. Und damit habe ich eigentlich im Großen und Ganzen mein Ziel erreicht. Der Rahmen rund um mein Bild stört mich jetzt gerade. Wenn ich das Bild neulade, verschwindet auch dieser wieder. Soweit zum Hintergrundbild. Das heißt, ich kann mit ein paar zusätzlichen CSS-Eigenschaften dafür sorgen, dass mein Bild zwar auf der einen Seite mein Bildschirm ausfüllen kann, das aber auf der anderen Seite die Position des Bildes besser bestimmt werden kann. beziehungsweise mit einer Eigenschaft wie Background Size Cover kann ich sicher gehen, dass ich meine Grafik optimal dargestellt bekomme.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!