Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

CSS/Eigenschaften/Hintergrundfarben und -bilder/background-image

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft background-image können Sie eine oder multiple Hintergrundgrafiken einbinden, d.h. Sie legen den Pfad zu den Hintergrundbildern fest.

  • CSS 2.1
  • IE
  • Firefox
  • Safari
  • Opera
  • Chrome

Folgende Werte sind möglich:

  • none: Standardwert, kein Hintergrundbild
  • url(Pfadangabe), url(Pfadangabe). Die Pfadangabe kann dabei relativ oder absolut erfolgen
    (siehe HTML/Regeln/Referenzieren_in_HTML).
    Beachten Sie: Relative Angaben beziehen sich ggf. auf die CSS-Ressource, nicht auf das HTML-Dokument.
    Da die Pfadangabe eine Zeichenkette ist, muss sie in Anführungzeichen gesetzt werden.
  • inherit: Angaben des Elternelements werden übernommen

Es gibt auch die Möglichkeit mit einer CSS-Funktion Farbverläufe als Hintergründe zu erstellen:


Empfehlung: Geben Sie neben dem Hintergrundbild auch immer eine passende Hintergrundfarbe an. Wenn das Bild nicht angezeigt wird, z.B. weil Benutzer eine kontrastreiche Ansicht in ihrem Browser eingestellt haben, ist so der Text trotzdem noch sichtbar.
Beispiel
p {
  background-color: black;
  background-image: url("...");
  color: white;
}


Anwendungsbeispiele[Bearbeiten]

Beispiel ansehen …
      #demo {
        background-image:
          url("..."),
          url("...");
        height: 20em;
        outline: 1px solid;
        width: 30em;
      }
</source>
In diesem Beispiel werden zwei Hintergrundgrafiken übereinander gelegt. Da Angaben zu den weiteren Eigenschaften der Hintergründe fehlen, verwenden die Browser ihre default-Einstellungen - so z.B. für background-repeat den Standardwert repeat, was zu einer Kachelung der Hintergrundbilder führt.

Einbindung von base64-kodierten Data-URI-Grafiken[Bearbeiten]

Hintergrundgrafiken werden im Allgemeinen nur beim erstmaligen Laden einer Seite vom Browser angefordert und übertragen, bei weiteren Seitenaufrufen können sie aus dem Browsercache geladen werden.

Trotzdem mag es sinnvoll sein, die Grafiken nicht als externe Ressourcen, sondern als Bestandteil der CSS-Ressource nur einmal übertragen zu müssen.

Einbindung von SVG-Grafiken[Bearbeiten]

Bei SVG-Grafiken müssen Sie nicht den Umweg über die base64-Codierung gehen, sondern können gleich das SVG-Markup verwenden:

Beispiel ansehen …
background-image:
	url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%206%22%3E%3Ctext%20id%3D%22text%22%20x%3D%220%22%20y%3D%222%22%20font-family%3D%22Helvetica%22%20font-size%3D%221%22%20fill%3D%22silver%22%20style%3D%22text-transform%3A%20uppercase%22%20transform%3D%22rotate%28-14%29%22%3Ecomment%3C%2Ftext%3E%3C%2Fsvg%3E'),
	url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%206%22%3E%3Ctext%20id%3D%22text%22%20x%3D%220%22%20y%3D%222%22%20font-family%3D%22Helvetica%22%20font-size%3D%221%22%20fill%3D%22red%22%20style%3D%22text-transform%3A%20uppercase%22%20transform%3D%22rotate%28-14%29%22%3Ecomment%3C%2Ftext%3E%3C%2Fsvg%3E'),
	url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%206%22%3E%3Ctext%20id%3D%22text%22%20x%3D%220%22%20y%3D%222%22%20font-family%3D%22Helvetica%22%20font-size%3D%221%22%20fill%3D%22black%22%20style%3D%22text-transform%3A%20uppercase%22%20transform%3D%22rotate%28-14%29%22%3Ecomment%3C%2Ftext%3E%3C%2Fsvg%3E');
	background-repeat: repeat;
	background-size: 12em 6em;
	background-position: 0 0, 8em -2em, 16em -4em;
	/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><text id="text" x="0" y="2" font-family="Helvetica" font-size="1" fill="silver" style="text-transform: uppercase" transform="rotate(-14)">comment</text></svg> */
}
Anstelle einer externen Referenz wird das SVG-Markup direkt notiert.
Es werden 3 (fast) identische SVGs als Hintergrundbilder verwendet, Data-URLs, prozentcodiert (die Rohform im Kommentar). Nur zur Verdeutlichung sind sie unterschiedlich gefärbt (silver, red, black).

Als Neigungsverhältnis für die Schrift wurde ein ganzzahliges Verhältnis gewählt: ¼. Das ergibt einen Neigungswinkel von arctan ¼ ≈ 14°, der sich in transform="rotate(-14)" wiederfindet.

Damit genug Luft zwischen den Schriftzügen ist, ist das Seitenverhältnis Höhe : Breite der Textgrafiken nicht ¼, sondern doppelt so hoch; Seitenverhältnis also ½, was sich in viewBox="0 0 12 6" und background-size: 12em 6em wiederfindet.

Dem Neigungswinkel entsprechend sind die zweite und dritte Textgrafik so gegenüber der ersten verschoben, dass die Texte auf einer Linie stehen: background-position: 0 0, 8em -2em, 16em -4em;.

Quelle: Self-Forum: „Schnittkantenproblem“ bei gekachelter Hintergrundgrafik mit quergestellter Schrift von Gunnar Bittersmann
Beachten Sie, dass Sie aus dem SVG-Code alle Zeilenumbrüche entfernen müssen.

Die Daten in Data-URLs müssen laut Standard URL-encodiert sein. Viele Browser akzeptieren nicht URL-encodierte SVGs, im IE werden sie jedoch nicht ausgeführt.

Siehe auch

Weblinks[Bearbeiten]