Dynamische Hintergrundbilder ohne Inline Styles verwenden

Freitag, 21. August 2020

• CSP
• CSS
• Sicherheit

Möchte man z.b. in einem Header (wie auf dieser Website) je nach Inhalt unterschiedliche Hintergrundbilder verwenden nutzt man normalerweise style='background-image:irgendwas'. Will man aber gleichzeitig eine Content Security Policy verwenden muss man dafür style: 'unsafe-inline' verwenden, was nicht empfohlen ist.

Eine Lösung ist dafür ist den Pfad auf das Bild in eine data Attribute zu schreiben und dann über javascript einer css Variable zu zuweisen.

HTML

<section id="dynamic-bg" data-imgurl="url(@variable)">...</section> 

CSS

:root { --bg: ""}
...
section#dynamic-bg
{
   background-image: var(--bg);
}

Javascript

document.documentElement.style.setProperty("--bg", document.getElementById("dynamic-bg").getAttribute("data-imgurl"));

Einfacher wäre natürlich wenn man direkt background-image: attr(data-imgurl); schreiben können. Im Augenblick ist das die attr() funktion aber nur für content gültig (Stand 2020/08)

---

Blog / Lothar Steidle

Letzte Einträge

Beliebteste Einträge