Gunnar Bittersmann: Grafik überlagern nur per CSS?

Beitrag lesen

@@uli:

nuqneH

ich möchte Bilder in Websites mit einer gekachelten "Punkt" Textur überlagern. Sowas sieht man manchmal bei Hintergrundbildern.

Warum tust du da nicht im Bildbearbeitungsprogramm deiner Wahl?

Vorteil: Der Browser hat beim Rendern weniger zu tun. Könnte auf Mobilgeräten einen Performanzunterschied machen.

Außerdem muss nur eine Bilddatei statt zwei übertragen werden, die allerdings größer sein dürfte als die Summe der beiden anderen.

Ist es möglich dieses Bild "nur" per CSS über den Bildern anzeigen zu lassen?

Natürlich. Elemente können mehrere Hintergrundbilder haben. In allen relvanten Browsern.

Fallback für IE < 9:

#foo  
{  
  background-image: url(foo.jpg);  
  background-image: url(pattern.png), url(foo.jpg);  
}

Qapla'

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)