Nutzen Sie die Eigenschaft CSS-Hintergrundgröße

  • Erforderliche Kenntnisse: Grundlegendes HTML und CSS
  • Benötigt: HTML / CSS-Editor, moderner Browser
  • Projektzeit: 30 Minuten - 1 Stunde

Die Änderungen, die durch die verschiedenen CSS3-Module gebracht werden, sind für Designer und Front-End-Entwickler ziemlich aufregend. Eine Verringerung der Bandbreite und der HTTP-Anforderungen, eine schnellere Wartung und die Verwendung von echten Schriftarten anstelle von Bildern sind große Vorteile in Bezug auf SEO und Barrierefreiheit. Ein Bereich, der etwas vernachlässigt zu sein scheint, sind die neuen Hintergrundeigenschaften. Oh sicher, Farbverläufe liegen voll im Trend - und das zu Recht - aber es gibt einige super praktische Teile, die Sie möglicherweise nicht gründlich untersucht haben. Vielleicht scheinen sie nützlicher zu sein und haben nicht die Prahlerei von Kastenschatten und Randradius, aber in diesem Tutorial möchte ich Ihre Meinung ändern. Einer meiner Favoriten ist die Hintergrundgröße. Mal sehen, was einige der Möglichkeiten sind.

Die Eigenschaft 'Hintergrundgröße' macht genau das, was Sie erwarten würden - Sie können die Größe eines Hintergrundbilds sowohl auf der X-Achse (horizontal) als auch auf der Y-Achse (vertikal) angeben. Mögliche Werte für die Eigenschaft 'Hintergrundgröße' sind:



  • Pixelwert
  • Prozentsatz - bezogen auf den Hintergrundpositionierungsbereich
  • auto - die Standard- oder tatsächliche Größe des Bildes
  • Abdeckung - Decken Sie den Hintergrundpositionierungsbereich vollständig ab, während Sie das Seitenverhältnis beibehalten. Es kann zu Übersteuerungen kommen.
  • enthalten - Skalieren Sie das Hintergrundbild so, dass es vollständig im Hintergrundpositionierungsbereich enthalten ist. Möglicherweise wird zwischen dem Hintergrundbild und einer Seite des Containers ein Leerzeichen angezeigt, da keine Übersteuerungen auftreten.

01. Prozentwerte geben uns Flexibilität

Machen Sie sich keine Sorgen über das seltsam klingende Startseite und enthalten gerade noch - wir werden uns später einige gute Demonstrationen davon ansehen. Beginnen wir mit der Untersuchung des Prozentwerts. Es gibt eine Vielzahl von Verwendungsmöglichkeiten für die Größenanpassung eines Hintergrundbilds in Prozent - insbesondere im Bereich des reaktionsschnellen Designs. Ein Beispiel wäre ein einheitlicher Designstil mit subtilen Verläufen hinter vielen Elementen. Sie können einen einzelnen Farbverlauf erstellen und ihn so dimensionieren, dass er in jedem Container funktioniert. Ich habe in diesem Beispiel Blau verwendet, um sicherzustellen, dass es auf allen Monitoren angezeigt wird, aber es wird auf Ihrer Seite wahrscheinlich viel subtiler sein. Das Bild selbst ist unten blau und oben allmählich weiß - 10 Pixel breit und 35 Pixel hoch. Der Code lautet wie folgt:



div {
Hintergrundbild: URL (gradient.jpg);
Hintergrundposition: links unten;
Hintergrundgröße: 100% 70%;
Hintergrundwiederholung: keine Wiederholung;
}}

Bei Verwendung des gleichen 35px hohen Farbverlaufs werden 70 Prozent jeder Box abgedeckt



Bei Verwendung des gleichen 35px hohen Farbverlaufs werden 70 Prozent jeder Box abgedeckt

Ich habe das Bild so eingestellt, dass es am unteren Rand jeder Box beginnt, sich zu 100 Prozent vergrößert, aber nur zu 70 Prozent hoch ist, damit der Rest zu Weiß verblasst (ich hätte es genauso gut auf 20 Prozent einstellen können Cent oder 100 Prozent hoch). Die Nichtwiederholung muss verwendet werden, da das Bild bei der 70-Prozent-Marke von vorne beginnen würde. Diese Technik, da Sie ein einzelnes Bild wiederholt wiederverwenden können, spart Ihnen HTTP-Anforderungen und Bandbreite und eignet sich hervorragend für Ihr Arsenal.

02. Noch flexiblere und zugänglichere Anwendungen

Prozentwerte haben noch aufregendere Verwendungszwecke. Alles, was ich tun kann, um meine Seiten flexibler und unzerstörbarer - und insbesondere zugänglich - zu machen, ist umso aufgeregter. Ja ich weiß. Für einen Geek braucht es nicht viel. Vor kurzem Ich habe eine Seite gebaut für einen Designer, bei dem die Titelseite äußerst grafisch war.

Die Homepage von Fresh Picked Design



Die Homepage von Fresh Picked Design

Ich habe den Markt für kleine Bauern semantisch gebrochen. Vorhänge / Bühne / Wolken waren alle dekorative Bilder. Aber der Stand selbst auf dieser Seite ist das Logo. Ich möchte hierfür kein Hintergrundbild verwenden, da das alt-Attribut angeben soll, um was es sich handelt. Die Körbe mit den Produkten auf dem Stand sind die Navigation der Website. Bevor Sie sagen: 'Nun, machen Sie sie einfach zu Bildern und fertig', sollten Sie wissen, dass wir für die Navigation und das Interieur echten Text mit @ font-face verwendet haben Überschriften. Das ist also raus. Der Code für den Hauptteil der Seite ist in einem Div enthalten, das den blauen Hintergrund mit Farbverlauf hat und sehr einfach ist:



  • Referenzen

  • Kreativ

  • Kunden

  • Kontakt



Das 'frischeste' Div enthält das Navigations- und Logo-Bild. Es hat auch die Markise als Hintergrundbild. Jedes Warenkorbbild wurde ohne Text exportiert und jeder Link wurde in seinem jeweiligen Listenelement positioniert. Schließlich wurde das Logo mit seinem alt-Attribut auf der Seite platziert. Sieht gut aus, keine Probleme. Oder könnte es sein?

03. Zerfallendes Design

Wenn Sie das Wort Barrierefreiheit hören, stellt sich Ihr Verstand normalerweise eine Art Bildschirmleser oder unterstützende Technologie vor. Aber es gibt noch einen anderen Teil der Bevölkerung, der ständig wächst, und das sind Benutzer mit Sehbehinderung. Sie wissen - Ihre Mutter, Ihr Vater, Opa und Oma - vielleicht sogar Sie. Diese Benutzer benötigen größere Textgrößen, und Sie stellen sich wahrscheinlich vor, dass ihre Surfgewohnheiten so aussehen: Sie erreichen Ihre Website, sehen 10-Pixel-Text und können ihn nicht lesen. Verwenden Sie daher die Steuerelemente ihres Browsers, um die Textgröße zu erhöhen. Und natürlich verwenden sie einen 'modernen Browser', sodass die gesamte Seite vergrößert wird - Bilder nehmen mit der Textgröße gleichermaßen zu. Richtig? Kann sein. Vielleicht nicht.

Ein anderes Szenario sieht so aus. Für Benutzer mit Sehbehinderung ist der größte Teil (oder der gesamte) Text im Web schwer zu lesen. Sie haben keine Lust, den Text auf jeder Website, die sie besuchen, zu vergrößern. Stattdessen gehen sie zu ihren Browsereinstellungen und ändern die Basisschriftgröße. Die normale Basisschriftgröße für Browser beträgt 16px. Aber vielleicht entscheidet dieser Benutzer, dass er das Web bei 24px, 32px oder sogar 52px besser lesen kann. Wenn sie mit ihrer neuen personalisierten Einstellung auf Ihre Website surfen, ist ihr Text groß, aber die Bilder auf Ihrer Website werden nicht vergrößert. Und die Ergebnisse können schrecklich sein - und oft völlig unleserlich.

Es sieht so aus, als wäre unser Gemüsestand explodiert!

Es sieht so aus, als wäre unser Gemüsestand explodiert!

04. Mit dem Text wachsen

Was wäre, wenn die Bilder mit der Textgröße mitwachsen könnten, unabhängig davon, ob sie auf der Seite angepasst oder mit ihren eigenen Einstellungen gesurft wurden? Hier ist es praktisch, mit einem anderen Entwickler verheiratet zu sein. Als ich mich am Esstisch über meine bildreiche Seite beschwerte und über die Auswirkungen einer erhöhten Textgröße jammerte, fragte mein immer kreativer Ehemann: 'Was ist mit der Hintergrundgröße?' Bingo! Obwohl ich seit Jahren in die magische em-Einheit verliebt bin (meine eigene Site wurde mit em-Sizing erstellt), hatte ich noch nicht in Betracht gezogen, sie mit der neuen Eigenschaft in Hintergrundgröße zu kombinieren. Was für eine großartige Möglichkeit, die Seite lesbarer und zugänglicher zu machen. Für diejenigen, deren Köpfe sich voll gedreht haben, als ich den Begriff 'em unit' verwendet habe, möchte ich Ihnen eine kurze Erklärung geben (der Rest von Ihnen überspringt den nächsten Absatz).

Die Größe einer em-Einheit basiert auf der Basisschriftgröße eines Elements. Wenn Sie also die Schriftgröße für den Textkörper auf 100 Prozent festlegen, beträgt die Basisschriftgröße (sofern nicht geändert) 16 Pixel. Dies bedeutet 1em = 16px. Wenn wir ein Element auf 6em-Breite einstellen, wäre es (16px * 6) oder 96px breit. Wenn der Benutzer jedoch die Schriftgröße seines Browsers auf 32px geändert hat, ist 1em = 32px. Das gleiche 6em-breite Element ist jetzt (32px * 6) oder 192px breit. Sie können schnell erkennen, wie nützlich dies wäre, um das Verhältnis von Textgröße zu Elementgröße beizubehalten. (Es gibt viele gute Gründe, ems für die Entwicklung zu verwenden, aber dies ist nicht der richtige Ort dafür. Google ist Ihr Freund.)

05. Die kleinen Tweakies

Es sind wirklich nur ein paar schnelle Anpassungen an unserer Seite erforderlich, damit sie den Launen der inhärenten Schriftgröße unseres Benutzers standhält. Zunächst muss die gesamte Größe von Pixel in em-Einheiten geändert werden. Die .frischste Div, die die Markise hält, wurde von 534px breit auf 33.375em geändert. Dadurch wird das Markisenhintergrundbild selbst jedoch nicht vergrößert. Es erhöht nur die Größe des Div, der es hält. Hintergrundgröße eingeben!

.frischste {
Breite: 33,375 em;
Hintergrundgröße: 100% automatisch;
}}

Dadurch kann das Markisenhintergrundbild auf der X-Achse skaliert und bei größeren Textgrößen breiter werden, wobei jedoch die inhärente Höhe beibehalten wird, damit es die Gemüsekörbe nicht überlappt. Die Navigation war ebenfalls einfach. Sobald die Größe aller Navigationselemente auf die entsprechenden em-Einheiten geändert wurde, wurden die Hintergrundbilder des Warenkorbs auf den Listenelementen in beide Richtungen zu 100 Prozent dimensioniert.

.navMain li {
Hintergrundgröße: 100% 100%;
}}

Schließlich das lästige Gemüse stehen Grundbild. Da sich dieses Bild direkt im HTML-Code befindet, handelt es sich nicht um ein Hintergrundbild. Wir können es nicht mit der Hintergrundgröße dimensionieren. Aber verlieren Sie nicht den Glauben, auch hier gibt es eine Lösung. Indem ich die Breite und Höhe aus dem HTML-Code entfernte und als em-Einheiten in das CSS einfügte, konnte ich die Größe relativ zum Text anpassen. Nun, ich dachte ich wäre es. Aber leider, als ich meinen Text vergrößerte, zoomte alles andere wunderschön, aber die Basis meines Gemüsestandes blieb klein und einsam. Hmmm. Und dann, als ich in dieser Nacht einschlief (weißt du, die Zeit, in der dein Gehirn nicht die Klappe hält und endlich die Dinge herausfindet?), Wurde mir klar, dass es keine Größe hatte, weil es als Bild keinen Text hatte Größe zu Beginn. Offenbarung!

.homeLogo {
Breite: 33,75 em;
Höhe: 18,75 em;
Schriftgröße: 1em;
-ms-Interpolationsmodus: bikubisch;
}}

Hinzufügen der Schriftgröße: 1em gab mir genau den Effekt, den ich suchte. Obwohl es keinen Text im Bild gibt oder sich auf das Bild bezieht. Es ist der Ansicht, dass die Größe anhand einer 1em-Schriftgröße angepasst werden sollte. Der Leser mit den Adleraugen hat wahrscheinlich eine andere merkwürdige Eigenschaft bemerkt - den -ms-Interpolationsmodus. Internet Explorer (IE) hat Probleme beim Erhöhen der Bildgröße. Es kann pixelig und unattraktiv aussehen. Diese Eigenschaft hilft dem IE, beim Skalieren gut zu spielen, also verwenden wir sie. Wenn IE glücklich ist, sind alle glücklich. Und jetzt, wenn wir unsere Seite mit größerem Text besuchen, sehen wir Folgendes:

Der Text ist größer, aber der Gemüsestand bleibt intakt!

Der Text ist größer, aber der Gemüsestand bleibt intakt!

Wenn Sie das Originalbild mit diesem vergleichen, werden Sie feststellen, dass die Wolken nicht mit den anderen Bildern mitwachsen. Das liegt daran, dass sie in Pixelgrößen bleiben. Da sie für die Lesbarkeit nicht erforderlich sind, habe ich ihre Werte nicht geändert, aber Sie können, wenn Sie möchten. Nachdem wir uns einige großartige Verwendungsmöglichkeiten für die prozentuale Hintergrundgröße angesehen haben, schauen wir uns die seltsamen neuen Werte an.

06. Wenn Sie den gesamten Bereich abdecken möchten

Es ist nicht ungewöhnlich, dass Designer mir PSDs (oder Fireworks PNGs - mein Favorit) zum Codieren mit großem Hintergrund geben. Große, sich nicht wiederholende Hintergründe, um genau zu sein. Manchmal ist der Designer web-versiert genug, um zu wissen, dass der Hintergrund entweder wiederholt, einfarbig ausgeblendet oder auf andere Weise elegant beendet werden muss. Manchmal sind sie nicht. Aber jetzt habe ich ein Tool zur Verfügung, das mich davon abhält, in etwa 80 Prozent der Fälle für Optimierungen zu ihnen zurückzukehren. Die erste Option ist so lustig Startseite Wert. Dies bewirkt, dass das Hintergrundbild den Hintergrundpositionierungsbereich (dh das Element, in dem Sie es platziert haben) vollständig abdeckt, während das Seitenverhältnis beibehalten wird. Dies bedeutet, dass Sie mit dem Clipping einverstanden sein müssen, das bei verschiedenen Auflösungen auftreten kann. Seien wir ehrlich, es gibt keine zuverlässige Möglichkeit, vorauszusehen, welche Art von Gerät oder Auflösung - klein, mittel, groß und sogar besonders groß - unsere Websites heutzutage anzeigen werden.

Eine neue Seite, die mein Mann gebaut hat Denn unser bevorstehender Segelcharter ist ein perfektes Beispiel für den Deckungswert bei der Arbeit. Nachdem er kürzlich von den Jungferninseln zurückgekehrt war, wollte er ein Bild der Bäder in Virgin Gorda als Hintergrund für die Stätte verwenden. Da es sich jedoch um ein Außenbild handelt, ist das Ausschneiden kein Problem.

Mit Himmel oben, Sand unten und Felsen auf jeder Seite kann dieses Foto Beschneidungen standhalten

Mit Himmel oben, Sand unten und Felsen auf jeder Seite kann dieses Foto Beschneidungen standhalten

Der Code, mit dem er sichergestellt hat, dass dieses Foto den gesamten Hintergrund der Website abdeckt, lautet:

Körper {
Hintergrundbild: URL (../ images / baths.jpg);
Hintergrundgröße: Cover;
Hintergrund-Anhang: behoben;
}}

Beachten Sie die zusätzliche Eigenschaft des Hintergrundanhangs? Der feste Wert bedeutet, dass das Bild im Ansichtsfenster des Browsers fixiert ist. Wenn Sie also durch die Site scrollen, bewegt sich das Foto nicht. Snazzy!

Welche Designermarke wurde 1968 gegründet und hat einen Löwen im Logo?

Die Seite angezeigt als

Die Seite wird als 'vertikal herausgefordert' angesehen.

Egal wie Sie es betrachten, das Bild bedeckt den gesamten Körper.

Die Seite wurde größer, aber schmaler angezeigt

Die Seite wurde größer, aber schmaler angezeigt

Obwohl das Ansichtsfenster, in dem der Benutzer Ihre Website möglicherweise verwendet, unterschiedlich ist, ist es niemals unattraktiv.

07. Wenn es am besten ist, das Bild zu enthalten

Der Cover-Wert ist ideal für Bilder, bei denen es Ihnen nichts ausmacht, abgeschnitten zu werden. Das ist aber nicht immer der Fall. Im ein weiteres persönliches Projekt Diesmal wollten wir für die Demomaterialien meines Mannes und die Verwendung von mehr unserer Urlaubsfotos (hey, sie sind kostenlos) nicht das schöne traditionelle blaue Dach von der griechischen Insel Santorini verlieren.

Die Aussicht von Santorini - mit perfektem Himmel

Die Aussicht von Santorini - mit perfektem Himmel

Bei Verwendung von Deckung würde in einigen Auflösungen das Dach von der rechten Seite abgehen und niemals gesehen werden. Das war inakzeptabel. Wenn Sie enthalten enthalten, wird das gesamte Bild angezeigt immer in seiner Gesamtheit da sein, aber was machst du mit einer langen Seite und das Bild endet gerade? Sehen Sie diesen schönen, sogar blauen Himmel im Bild oben? Mit Photoshop vertraut? Sie haben es verstanden, das schönste Foto muss möglicherweise ein wenig perfektioniert werden, um ein nahtloses Erlebnis zu haben. Greg nahm die Farbe des Himmels an und machte ihn bis zum Ende gleichmäßig blau. Durch Positionieren des Santorini-Bildes am unteren Rand der Seite konnte er eine blaue Hintergrundfarbe (dieselbe Farbe, auf der das Foto endet) als Hintergrund für die gesamte Seite verwenden. Das heißt, die Seite könnte lang werden und der Himmel könnte für immer weitergehen.

Der Himmel - sie

Der Himmel - sie ist so blau

Wenn Sie genau hinschauen, haben Sie wahrscheinlich bemerkt, dass der Himmel kein Himmel ist sogar blau bis ganz nach oben. Fakt ist, das würde eher unnatürlich aussehen. Da wir jetzt mehrere Hintergrundbilder für Elemente verwenden können, hat Greg oben auf der Seite einen Farbverlauf verwendet - von einem passenden Blau zu einem transparenten Weiß ganz oben. (Im folgenden Code wird aus Platzgründen nur das Präfix -moz angezeigt. Denken Sie daran, dass Sie -webkit, -ms, -o einfügen und mit den regulären CSS3-Eigenschaften enden müssen.)

Körper {
Hintergrundfarbe: RGB (96, 147, 201);
Hintergrundbild: URL (../ images / santorini.jpg), -moz-linear-gradient (oben, rgba (255, 255, 255, .8), rgb (96, 147, 201) 250px);
Hintergrundwiederholung: keine Wiederholung, Wiederholung-x;
Hintergrundposition: Mitte unten, links oben;
-moz-Hintergrundgröße: enthalten, 250px;
Hintergrundgröße: enthalten, 250px;
}}

Wenn Sie mit mehreren Hintergründen nicht vertraut sind, werde ich das oben Genannte schnell interpretieren. Er hat zuerst die Hintergrundfarbe hinzugefügt, die den gesamten Hintergrundbereich abdeckt (ja, sie könnte genauso einfach hexadezimal geschrieben werden). Als nächstes hat er die beiden Hintergrundbilder eingefügt - durch Komma getrennt. Sie können beliebig viele hinzufügen. Denken Sie daran, dass der erste oben aufgeführt ist und sie visuell von dort absteigen. Da ein CSS-Gradient als Hintergrundbild betrachtet wird, ist es das zweite Bild in der Liste enthalten. Wenn Sie jede vorangestellte Version des Verlaufs verwenden, müssen Sie die gesamte Hintergrundbildeigenschaft (Liste der Bilder / Verläufe) für jedes Präfix erneut auflisten.

Die Eigenschaften Hintergrundwiederholung, Hintergrundposition und Hintergrundgröße haben ebenfalls zwei durch Komma getrennte Werte. Der Browser ordnet das erste Bild dem ersten Wert in jeder dieser Eigenschaften zu und fährt dann fort und macht dasselbe mit dem zweiten Wert. Wenn Sie für eine der Eigenschaften keine gleichmäßig übereinstimmende Werteliste haben, wird der Browser bei der ersten Liste erneut gestartet. Sie haben wahrscheinlich bemerkt, dass das Foto mit dem Contain-Wert auf die Unterseite des Körpers gesetzt wurde und der Farbverlauf einen 250px-Wert erhielt. Das fügt unserem Prozent / Cover / Include-Wertespektrum Pixel hinzu.

Im Vergleich zum ersten, schmaleren Bild können Sie sehen, dass das Bild, egal wie breit der Browser ist, das Bild ausfüllt

Im Vergleich zum ersten, schmaleren Bild können Sie sehen, dass das Bild, egal wie breit der Browser ist, das Bild ausfüllt

08. Ein Werkzeug und ein Tipp

Wenn Cover und Contain immer noch etwas neblig sind und Sie ein Stück spielen möchten, können Sie dies verwenden geschicktes Werkzeug, das Greg gebaut hat . Er hat einen gestrichelten Rand um das Körperelement gelegt, damit Sie sich vorstellen können, was tatsächlich passiert. Der Anfangswert ist Auto , das Ihnen das Foto in seiner tatsächlichen Größe zeigt. Klicken Startseite und enthalten und erhöhen / verringern Sie Ihre Browsergröße. Es sollte alles kristallklar werden.

Und ein kurzer Tipp! Wenn es eine Chance gibt, haben Sie möglicherweise Seiten mit wenig Inhalt. Das heißt, sie füllen möglicherweise nicht die Höhe des Browsers Ihres Benutzers aus - wie z. B. ein Dankeschön für das Ausfüllen unseres Formulars usw. - fügen Sie Ihrem HTML-Element eine 100-prozentige Höhe hinzu. Dadurch wird sichergestellt, dass das Foto bis zum Ende der Seite reicht.

html {
Höhe: 100%;
}}

Hoffe es hat euch gefallen. Ich würde gerne einige Verwendungen hören Sie gefunden für Hintergrundgröße! Twitter sie bei mir an @stefsull . Viel Spaß beim Codieren!

Stephanie (Sullivan) Rewis ist ein Front-End-Entwickler, der einwandfreie HTML5 / CSS3-Webseiten für Agenturen und Start-ups erstellt. Sie bringt anderen gerne bei, dasselbe zu tun, indem sie trainiert, spricht und schreibt. Sie kann einen gecharterten Katamaran steuern - legal - und liebt immer noch die neue Welle der 80er Jahre.