Hintergrundbilder, die man zur optischen Unterscheidung von einzelnen Seiten benutzt, sind nichts neues. Mich stört jedoch meist, wenn ich mehrere Grafiken einbinden muss, da jede Seite ihre eigene Gestaltung erhalten soll.
Da lädt der Besucher dann für jede Seite ein neues Bild – so kommen in der Summe mehrere Hundert KB zusammen. Besonders ärgerlich ist das Nutzen von einem Bild mit verschiedenen Farben/Nuancen.

Da helfen CSS Filter Effects
Diese bieten per CSS gute Möglichkeiten, Elemente direkt im Browser zu verändern. Das wirkt sich natürlich auch auf Hintergrundbilder aus, da der Filtereffekt auf dem gesamten Element greift.
Aktuell verfügbar und für unsere Zwecke interessant sind folgende Effekte:

• blur
• brightness
• contrast
• drop-shadow
• grayscale
• hue-rotate
• invert
• opacity
• sepia

Welcher Browser das unterstützt, steht hier: Can I use CSS Filter Effects?
Ratsam ist es die Webkit-Browser noch ein wenig anzustubsen, also das -webkit-Präfix zu verwenden.

In meinem Fall hatte ich ein Hintergrundbild, das eigentlich auf allen Seiten zum Einsatz kommt, nur eben im Pressebereich sollte es andersfarbig sein. Am besten in Schwarz-Weiß bzw. Graustufen. Das geht mit dem CSS-Filter grayscale().

.grau {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Original:
mein bereits im Photoshop eingefärbtes Bild

Ergebnis:
in Graustufen konvertiert

mit Sepia-Filter sepia(0.7)

Man kann auch mehrere Filter gemeinsam benutzen, man muss sie nur mit Leerzeichen getrennt verwenden:

.aufregend {
  filter: blur(20px) grayscale(20%);
}

So lassen sich in modernen Browsern einfach und schnell schöne Effekte erzeugen, die auch noch Ladezeit sparen.