Webdeveloper-Toolbar: CSS-Hintergrundbilder funktionieren nur mit absoluter URL

Bei meinen Basteleien an meiner Seite mit der Webdeveloper-Toolbar für Firefox habe ich endlich festgestellt, wo das Problem beim Bearbeiten der CSS liegt. Fügt man ein Hintergrundbild mit CSS ein, funktioniert die Vorschau nur bei Eingabe einer absoluten URL.

Screenshot Webdeveloper-Toolbar, CSS bearbeiten

Auch wenn man normalerweise in einer CSS-Datei auch einen relativen Pfad verwenden kann, ist dies beim Bearbeiten mit der Webdeveloper-Toolbar nicht möglich. Logisch, denn das bearbeitete CSS hat ja praktisch keinen Speicherort, von dem aus ein relativen Pfad existiert.

Zur Anschauung der relative Pfad eines Hintergrundbildes:

background-image: url(csshintergrundbild.jpg);

Und so sieht ein absoluter Pfad aus:

background-image: url(https://example.org/backgroundimage/csshintergrundbild.jpg);

Erst bei Angabe eines absoluten Pfades funktioniert das Bearbeiten der CSS “am offenen Herzen”. Zu Finden übrigens in der Toolbar unter CSS > Edit CSS.

Ähnliche Beiträge

Hier schreibt exklusiv für Dich

Marc Pentermann bloggt seit über zehn Jahren, hauptsächlich über technische, netzpolitische und sozialpolitische Themen mit dem Schwerpunkt Arbeit & Arbeitsmarkt. Immer sonntags gibt es einen Sammelbeitrag von lesenswerten Artikeln. Er arbeitet als Berufs- und Sozialpädagoge in der beruflichen Rehabilitation. Seit 2010 lebt er in Österreich (mehr).

4 Kommentare

  1. Newton

    Hallo,

    ich benutze die Webdeveloper-Toolbar auch schon seit einiger Zeit und möchte nicht mehr auf sie verzichten. Allerdings habe ich seit einigen Tagen ein kleines Problem. Ich habe über die praktische Funktion “CSS bearbeiten” die Hintergrundfarbe einer Seite geändert. Aber irgendwie kann ich das nicht mehr rückgängig machen. Haben Sie da eine Idee?

  2. Newton

    Leider hat das keine Auswirkungen. Sobald ich die Funktion “CSS bearbeiten” wieder schliesse, wird es wieder auf den geänderten Wert gestellt. Ich habe innerhalb der Funktion “CSS bearbeiten” einen Tab “styles.css” (das ist die originale Datei) und einen Tab “Eingebettete Styles” (in diesem steht der zusätzliche Code für die Hintergrundfarbe). Ich weiß nicht ob das weiterhilft.

    Hätten Sie etwas dagegen, wenn ich Ihnen 2 Screenshots per Email sende, damit Sie Sich ein Bild davon machen können?

  3. Gerne, wobei ich allerdings auf einem “du” bestehe ;-)

    Gibt es bei der Webdevelopertoolbar nicht auch einen Reload-Button, mit dem das Original-Stylesheet geladen wird?

Kommentare sind geschlossen.