Random image in CSS

  • Hallo,

    ich versuche ähnlich wie in http://sonspring.com/journal/easy-random-css-backgrounds beschrieben im CSS file statt auf ein Image direkt zu verweisen ein PHP script das ein Random-image-pfad zurück gibt. Leider zeigt mir der CSSviewer im Firefox immer das Background-image: random.php an, an statt das PHP zu expandieren. Ich verwende das Theme "Hello World von Business Broker".

    Danke für jede Hilfe.

    Klaus

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Link zum Blog?
    Was hast du denn am Rotator-Script geändert? Wie eingebaut? Mehr Infos wären - wie so oft - hilfreich.
    Ich habe das Script auch im Einsatz und das klappt problemlos.

  • Leider zeigt mir der CSSviewer im Firefox immer das Background-image: random.php an, an statt das PHP zu expandieren.

    Das ist schon richtig, des PHP-Script ändert ja nichts an der CSS-Datei selber, sonder gibt einfach das Bild dirket an den Browser zurück, wenn er es anfordert. Also steht dann beim Aufruf der CSS-Datei eben nicht ein zufällig generierter Bildname, wie 'Background-image: bild01.gif' oder so drin. Wenn man das will, müßte man die CSS-Date per Script "On The Fly" erzeugen.
    Außerdem müßte es, wenn übehaupt,

    Code
    background-image: url(random.php);

    heißen.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

    Einmal editiert, zuletzt von Putzlowitsch (21. Dezember 2006 um 09:52)

  • Es gibt zwei Möglichkeiten, ein Headerbild einzufügen. Für beide Fälle ist in diesem Beispiel vorausgesetzt, dass die insgesamt vier unterschiedlichen Bilder im Verzeichnis [Dein_Theme]/images liegen.

    1.) als background-image im HTML eingebettet
    2.) als background-image im css

    zu 1.)

    In die header.php von Wordpress folgenden Code einbauen:

    PHP
    <?php
    $new[1] = "header0.jpg";
    $new[2] = "header1.jpg";
    $new[3] = "header2.jpg";
    $new[4] = "header3.jpg";
    $zufall = rand(1,4);
    ?>

    Und dann so aufrufen für das Headerbild:

    PHP
    background: url(images/header<?php echo $new[$zufall]; ?>) no-repeat;

    zu 2.)
    Die style.css muß in style.php umbenannt werden und damit sie weiterhin als css-Datei erkannt wird, muß man sie als text/css ausgeben, und das geht folgendermaßen: Einfach

    PHP
    <?php
    header("content-type: text/css");
    ?>

    ganz oben (wichtig!) in die css hineinschreiben. Dann dort den anderen Codeschnipsel eingeben:

    PHP
    <?php
    $new[1] = "header0.jpg";
    $new[2] = "header1.jpg";
    $new[3] = "header2.jpg";
    $new[4] = "header3.jpg";
    $zufall = rand(1,4);
    ?>

    und an der richtigen Stelle im css z.B. so einbinden:

    PHP
    #header: background: url(images/<?php echo $new[$zufall]; ?>) ;

    Da Du ja nun die style.php hast, darfst du die style.css aber trotzdem nicht aus dem Theme löschen, das gibt sonst Probleme. Die style.css darf ruhig leer sein. Das könnte man sicher eleganter lösen, aber wie, habe ich noch nicht ergründet.

    Viele Grüße,
    Gabi

  • Hallo,

    der aktuelle Code in der CSS Datei (Wordpress Theme: "Hello World") ist:

    #header {
    height: 200px;
    color: #ffffff;
    padding: 0;
    background: #505050 url(images/front.jpg) top left no-repeat;
    clear: both;
    margin: 5px 0 0 0;
    }

    random.php:
    <?php echo("http://...../hello-world/images/front%22.rand(1,2).%22.jpg"); ?>
    2 Bilder front1.jpg und front2.jpg liegen bereit.

    Ich habe versucht:

    background: #505050 url(random.php) top left no-repeat;

    Leider tut es nicht.... :-(

    Vielen Dank für jede weitere Hilfe.

  • Achso, ich hatte gedacht, daß Du das oben von leviathan zitierte Script verwendest. Damit geht es so, wie ich es beschrieben habe. Beispielsweise unter http://ein.gabedaten.de/ zu sehen. Einen Nachteil dieser Methode will ich aber auch nicht verschweigen. Der Cache-Mechanismus des Browsers greift hier nicht, das heißt die Bilder werden bei jedem Aufruf immer komplett neu geladen.

    Wenn Du es aber so machen willst, wie jetzt von Dir bschrieben, mußt Du wohl den von copernica ausführlich beschriebenen Weg gehen.
    Das Problem liegt einfach darin, das die CSS-Datei (oder besser der Server) nichts von PHP an der Stelle weiß, also 'random.php' einfach unbehandelt läßt.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!