One-Page-Webseiten mit Bootstrap, LESS und Sass

Hintergrundbild einbauen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Hintergrundbild wird hier über LESS eingefügt und dann noch entsprechend angepasst.
04:58

Transkript

Ich möchte nun ein Hintergrundbild für meine allererste Sektion haben, und ein Hintergrundbild füge ich eigentlich über CSS ein, beziehungsweise jetzt fügen wir es über LESS ein und Sie werden sehen, dass die Vorgehensweise eigentlich ziemlich identisch ist. Um mein Hintergrundbild der richtigen Sektion zuzuweisen, habe ich eine ID für meine Sektion, die ich brauche und in meinem Fall ist das eben die ID "home", mit der ich die Sektion ansprechen kann. Und ich brauche ein Bild. Ich habe in meinem Ordner "dist" jetzt einen neuen Ordner "pics" angelegt, und in diesem Ordner "pics" sind ein paar Bilder drin, und ich möchte gerne das Bild "Alm" als Hintergrundbild für meine Sektion "home" haben. Wenn ich jetzt das Ganze in LESS eingeben möchte, so habe ich dafür schon eine eigene kleine Datei, nämlich "meinstyle.less" und in "meinstyle.less" schreibe ich nun all die Angaben hinein, die von mir jetzt zusätzlich zu dem, was Bootstrap hat, noch kommt. und ich spreche meine Sektions-ID an. also "#home" spricht meine Sektions-ID an und dann möchte ich einen "background" haben, und der background bekommt einerseits mal vorsichtshalber falls sonst nichts ist, eine Farbe, damit ich sehe, dass da was anders ist, und weise die URL des Bildes zu. Jetzt stehe ich im LESS-Ordner drin, d.h. ich habe einen relativ weiten Weg, ich muss nämlich aus dem "less"-Ordner raussteigen und dann in den "dist"-Ordner wieder hineinsteigen und vom "dist"-Ordner muss ich in meinen "pixel"-Ordner und dort liegt nacher mein "Alm.jpg". Ich bin gespannt, ob ich mich jetzt bei dieser Pfadeingabe verschrieben habe. Ich möchte nicht, dass sich dieses Bild wiederholt, also "no-repeat", und ich möchte dass dieses Bild, falls es ist größer wäre als der Bildschirm, zentriert angezeigt wird. Dieses spezielle Bild ist nicht allzu groß, d.h. es wird einen großen Bildschirm gar nicht füllen können, für die kleineren Bildschirmausgaben täte es reichen. Damit es schön mitschrumpfen und sich mitbewegen kann, brauche ich jetzt noch eine "background-size"- Angabe, und die bekommt den Wert "cover". Dann hatte ich noch einen Text und der Text sollte zentriert angezeigt werden, also "text-align: center". Sie merken, dass das Vorgehen exakt dasselbe ist wie beim CSS. Ich speichere meinen Eintrag, wechsle wieder zu meiner Index, und werde mir das Ganze jetzt mal in Firefox ansehen. Da muss ich noch eine Kleinigkeit anpassen, denn ich habe das Bild in der Sektion hinterlegt. Die Sektion hat aber noch einen Wert, der heißt "container", und damit eine fixe Breite. Wenn ich das jetzt ändern möchte, dass ich den ganzen Bildschirm nutze, muss ich die Klasse ändern, zu "container-fluid". Jetzt haben wir es aber, ich speichere meinen Eintrag wieder sehe mir das Ganze neuerlich an, und jetzt ist es so, dass es über die ganze Breite geht. Jetzt habe ich noch einen zweiten kleinen Schönheitsfehler, ich habe hier einen Abstand hin zu meiner Navigation. Das kommt daher, dass ich ein "padding" bereits beim "body" dabei habe, und das addiert sich jetzt mit dem "padding" der Sektion. Das kann ich beheben, indem ich einfach meinem "Home"-Segment ein gegenteiliges "padding" oder in dem Fall ein "margin", einen negativen "margin" mitgebe. d.h. hier habe ich "margin-top" und sage jetzt "–20px", damit sollte mein Bild genau dieses Stück hinaufrutschen. Ich speichere mit Strg+S, wechsle wieder in meine Index, und sehe mir das Ganze an. Und tatsächlich ist das Bild das Stück hinauf gerutscht. Es stört hier nicht mehr. Ich habe da unten einen freien Raum am Fußende des Bildes. Das liegt aber an der Größe meines Bildes und stört mich nicht wirklich, weil danach kommt gleich die nächste Sektion. Hiermit habe ich ein Hintergrundbild angewendet das so ganz nebenbei auch noch wunderbar mitskalieren wird, falls sich das Größenverhältnis des Bildschirms verändert.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...

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!