Hallo!

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


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.



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!

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

dom_beta

Ach ich vergaß :

Funktioniert auf allen aktuellen Browsern - bei IE weiß ich nicht - ist aber auch nicht aktuell

Hi 4mac,

ich meinte dieses:


Das wird nicht von allen Browsern unterstützt. Erst die aktuelle Safari-Version und die neueren anderen Browser-Versionen unterstützen das.

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:



Cheers

Hier noch schnell die Spezifikationen dazu:
http://www.w3.org/TR/css3-background/

Hi,

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!

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


Ist ja kein Geheimnis - gern geschehen