WinFuture-Forum.de: [CSS] background-size Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

[CSS] background-size Problem


#1 Mitglied ist offline   ph030 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.130
  • Beigetreten: 14. Juli 04
  • Reputation: 36
  • Geschlecht:unbekannt

geschrieben 26. September 2013 - 00:00

Für ein kleines Projekt hätte ich in einer Website gerne eine Flagge als Hintergrund, die hat drei vertikale Streifen, wie z.B. die italienische (grün, weiß, rot). Nun möcht ich natürlich am Traffic sparen bzw. die Geschwindigkeit hochhalten, also hab ich eine 3x1 Pixel Graphik erstellt, die dann ordentlich skaliert werden soll - folglich je ein vertikales Drittel der Seite in einer Farbe.

Der Code sieht so aus
<!DOCTYPE html>
<html>
<head>
    <title>foo</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    
    <style type="text/css">
        html {background-image: url(flag-s.png);background-size: cover}
    </style>
</head>

<body>
</body>
</html>


Chromium (30x, Linux) stellt es wie gewünscht dar, Firefox (24.0), Opera (12.16) und webkit-gtk (dwb) jedoch nicht. Die drei fangen außen am Rand jeweils mit der richtigen Farbe an und bringen dann einen Verlauf nach weiß zur Mitte hin, wo es in einem dünnen, weißen Streifen endet.

Statt 'cover' hab ich's auch mit '100%' probiert, liefert jedoch das selbe Ergebnis. Ist nun was an meinem Code auszusetzen bzw. gibt es eine besser funktionierende Lösung?

Edit, gewünscht ist eine möglichst komplex-freie Lösung für alle modernen Browser, inkl. IE>=7, idealerweise ohne JS.

Dieser Beitrag wurde von ph030 bearbeitet: 26. September 2013 - 00:08

0

Anzeige



#2 Mitglied ist offline   Holger_N 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.111
  • Beigetreten: 11. September 10
  • Reputation: 458
  • Geschlecht:Männlich

geschrieben 26. September 2013 - 00:33

Wieviel Traffic willst du denn sparen, sone png-Datei 800x600 Pixel mit drei Farbbalken hat bei mir ein 1,04 kB.
Bauernregel: Regnets mächtig im April, passiert irgendwas, was sich auf April reimt.
0

#3 Mitglied ist offline   ph030 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.130
  • Beigetreten: 14. Juli 04
  • Reputation: 36
  • Geschlecht:unbekannt

geschrieben 26. September 2013 - 00:49

Geht weniger um Traffic, mehr um Performance, im Sinne von Scrollgeschwindigkeit, da haben einige - gerade mobile - Geräte Probleme mit. Skalieren muss ich sowieso und da ich ja nur drei Farben hab, bringt's nix, das von 3xxxX3xxx runterzuskalieren, wenn ich dafür erstmal mehr kb runterziehen muss. Mein jetziges PNG hat 139bytes, eines mit 3900x3900 (weil Retina und so) hätte trotz `optipng` immer noch 8kb.

SVG wär am einfachsten, aber da scheitern ja die meisten Browser, gerade die mobilen, dran. Die Aspektratio ist mir ja auch nur in x-Richtung wichtig, in y-Richtung kann das Ding so lang sein, wie es halt muß, deswegen wundert's mich, dass ich bis jetzt keine ordentliche Lösung hab.
0

#4 _d4rkn3ss4ev3r_

  • Gruppe: Gäste

geschrieben 26. September 2013 - 05:04

Wie sieht es aus wenn du die Zeile so abänderst?
html {background-image: url(flag-s.png)no-repeat;background-size: cover}
0

#5 Mitglied ist offline   ph030 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.130
  • Beigetreten: 14. Juli 04
  • Reputation: 36
  • Geschlecht:unbekannt

geschrieben 26. September 2013 - 13:57

Beitrag anzeigenZitat (d4rkn3ss4ev3r: 26. September 2013 - 05:04)

Wie sieht es aus wenn du die Zeile so abänderst?
html {background-image: url(flag-s.png)no-repeat;background-size: cover}

Das ergibt das selbe Problem in O&FF, zusätzlich scheint der sich dann an die Ratio zu halten und hat folglich im unteren Bereich einen rein-weißen Streifen. Ausserdem funktioniert's so dann auch nicht mehr in Chromium.

KA ob das ein allgemeines Problem mit .png ist, hab mir die Datei (unten angehängt) grad nochmal angeschaut, im Zoom vom 1x - 7.5x wird's richtig angezeigt (in sxiv und geeqie getestet), ab Zoom 8x erhalte ich auch hier eine fehlerhafte Darstellung. Sehr merkwürdig.

Edit, hab jetzt mal eine neue Datei erstellt, in deutlich größerer Dimension, jetzt klappt das zwar vom Prinzip, dafür sind die eigentlich harten Lininen halt immer noch verwaschen. Doofer Pixeldreck.

Angehängte Miniaturbilder

  • Angehängtes Bild: flag-s.png

Dieser Beitrag wurde von ph030 bearbeitet: 26. September 2013 - 14:16

0

#6 Mitglied ist offline   Mondragor 

  • Gruppe: aktive Mitglieder
  • Beiträge: 391
  • Beigetreten: 22. Februar 12
  • Reputation: 44
  • Geschlecht:Männlich

geschrieben 27. September 2013 - 09:06

kann man mit inkscape nicht vektorgrafiken in einem für Browser verständlichen Format entwerfen?
0

#7 Mitglied ist offline   aeris 

  • Gruppe: aktive Mitglieder
  • Beiträge: 129
  • Beigetreten: 06. September 08
  • Reputation: 12
  • Geschlecht:unbekannt

geschrieben 28. September 2013 - 10:39

Schau dir mal image-rendering an.

image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:optimize-contrast;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;

0

#8 Mitglied ist offline   ph030 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.130
  • Beigetreten: 14. Juli 04
  • Reputation: 36
  • Geschlecht:unbekannt

geschrieben 28. September 2013 - 17:16

Beitrag anzeigenZitat (aeris: 28. September 2013 - 10:39)

Schau dir mal image-rendering an.

image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:optimize-contrast;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;



Danke für den Tipp, Firefox funktioniert damit wie gewünscht, Chromium weiterhin auch, aber Opera und webkit-gtk basierte Browser (dwb, xombrero) haben dennoch das oben genannte Problem, zumindest die aktuellen Linux-Versionen - wobei Opera zumindest auf Mozillas Seite gelistet ist (>=11.6).
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0