Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>CSS background cover

CSS background cover

dom_beta02.11.1519:35
Hallo!

Man kann ja via CSS ein Hintergrund als Cover einblenden lassen.

background-size:cover;

ich habe da eine Kurzfassung der Anweisung background gefunden, allerdings scheint entweder diese Kurzfassung nicht richtig zu sein oder aber, die Browser unterstützen das noch nicht ganz.


background: url(your.gif) top left / cover no-repeat;

Anscheinend wird die Option "center center" für obiges wohl nicht unterstützt. Zumindest funktioniert dies weder unter Edge noch Firefox (Windows) noch Opera (Windows).

Kann man mir jemand sagen, ob denn die Kurzfassung bereits unterstützt wird?
Gibt es denn eine Kurzfassung für cover?

Andernfalls müsste ich auf die bisherige Anweisung zurückgehen.

Danke!
„...“
0

Kommentare

4mac
4mac16.11.1517:54
dom_beta

Da hast du wohl die Syntaxe falsch verstanden:

background: #fff url("deinbild.endung") no-repeat Center;

background-size:cover, contain oder px/% usw. (Letzteres kann für x und y notiert werden)


Cover: Bild wird ausgefüllt dargestellt

Contain: Bild wird entweder horizontal oder vertikal komplett angezeigt, je nachdem, was kleiner oder größer ist


In der ersten Zeile bewirkt Center bei Cover folgendes:
Das Bild wird zentriert zum Container dargestellt - die anderen Parameter entsprechend



Hoffe das einigermaßen erklärt zu haben
0
4mac
4mac16.11.1517:58
dom_beta

Ach ich vergaß :

Funktioniert auf allen aktuellen Browsern - bei IE weiß ich nicht - ist aber auch nicht aktuell
0
dom_beta16.11.1519:25
4mac
Funktioniert auf allen aktuellen Browsern - bei IE weiß ich nicht - ist aber auch nicht aktuell

Hi 4mac,

ich meinte dieses:

background:url(..) center / cover no-repeat fixed;

Das wird nicht von allen Browsern unterstützt. Erst die aktuelle Safari-Version und die neueren anderen Browser-Versionen unterstützen das.
„...“
0
4mac
4mac17.11.1511:40
So gerade mal getestet...


Sieht so aus, als wenn einige Browser nicht die komplette CSS 3 Spezifikation umsetzen.
Safari macht so gut wie alles (Safari 9). FF 42 kann nicht damit umgehen und Opera nur einige Anweisungen, welche sich allerdings nur auf das Attachment beziehen.

Wenn alle Anweisungen einzeln geschrieben werden, gibt es keine Probleme.


Was aber bei allen aktuellen Browsern funktioniert ist:

background:url(...) center / cover no-repeat fixed #color


Cheers
0
4mac
4mac17.11.1511:42
Hier noch schnell die Spezifikationen dazu:
http://www.w3.org/TR/css3-background/


0
dom_beta17.11.1511:45
Hi,
4mac
Sieht so aus, als wenn einige Browser nicht die komplette CSS 3 Spezifikation umsetzen.
Safari macht so gut wie alles (Safari 9). FF 42 kann nicht damit umgehen und Opera nur einige Anweisungen, welche sich allerdings nur auf das Attachment beziehen.

Also, soweit ich das hier sehen kann, kann das FF 41 und 42, Opera 32 und 33, Chrome 45 und 46, MS Edge und IE 11 und Safari 9.

PS Danke für den Link!
„...“
0
4mac
4mac17.11.1511:48
dom_beta
Also, soweit ich das hier sehen kann, kann das FF 41 und 42, Opera 32 und 33, Chrome 45 und 46, MS Edge und IE 11 und Safari 9.

FF 42 kann nur no-repeat - wenn du da mal round eingibst, siehst du gar nix mehr - Safari und Opera können das noch

dom_beta
PS Danke für den Link!

Ist ja kein Geheimnis - gern geschehen
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.