wechselndes Hintergrundbild - wo die Variable definieren?

Muckel

Hallo zusammen,

bei meinem Layout habe ich in einem DIV-Element ein Hintergrundbild. Jenes soll wechseln, da ich mehrere Bilder habe. Im Grunde würde das so ablaufen:

PHP

<?php 
$bgs=array( 
              'Grafiken/logo/01.jpg', 
              'Grafiken/logo/02.jpg', 
              'usw.' 
             ); 
  shuffle($bgs); 
?> 
 
#oben { 
    margin:0em 2.5em 0em 2.5em; 
    padding:0em; 
    height:15em; 
    color:#fff; 
    background-color:#CCC; 
    border-top:solid 0.5em #fff; 
    border-left:none; 
    border-bottom:solid 0.5em #fff; 
    background-image: url(<?php echo $bgs[0];?>); 
    background-position:left bottom; 
    background-repeat:no-repeat; 
}

Alles anzeigen

Die Frage ist nur, in welche Datei ich den obigen php-Teil einbinden kann/muss? Und funktioniert der php-Teil in einer *.css Datei?

Wie könnte ich das sonst gut umsetzten?

Gruß Muckel

Werbepost

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

Ammaletu

Nein, in eine normale CSS-Datei kannst Du das nicht reinschreiben (und würdest Du auch nicht wollen, dann könnte die ja nicht gecacht werden). Ich würde da vorschlagen, die Style-Definition ganz normal ins Stylesheet zu schreiben, z.B. mit dem Default-Hintergrundbild. In der Theme-Datei (z.B. header.php des Themes), in der Du das ganze dann benötigst, kannst Du dem div über das style-Attribut dann direkt das nötige Hintergrundbild mitgeben, welches das Default-Bild aus der CSS-Datei überschreibt.

Muckel

hm... so ganz bin ich grad nicht auf der Höhe...

Ich habe die header.php in der folgendes steht:

PHP

<div id="oben">
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 
    <p><?php bloginfo('description'); ?></p>
</div>

In der css-Datei steht der CSS-Code, den ich schon gepostet habe.

Wenn ich Dich richtig verstehe, kann ich fast alles so lassen, bis auf die Sache mit dem Hintergrundbild, welches ich dann direkt in das div schreiben würde. Also würde daraus sowas werden:

PHP

<div id="oben" style="background-image: url(<?php echo $bgs[0];?>); ">
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 
    <p><?php bloginfo('description'); ?></p>
</div>

Soweit habe ich Dich richtig verstanden, oder? Und wo würde ich dann die definition für die Variable reinschreiben?

vielen Dank
Muckel

Ammaletu

Die Variable muss mit in die header.php oder eine andere, vorher geladene PHP-Datei Deiner Wahl. PHP in CSS-Dateien ist nicht per se unmöglich, aber ich würde es wirklich nicht machen.

Muckel

Guten Morgen zusammen,

haben in der style.css das Hintergrundbild auskommentiert und nur die Anordnung und das Wiederholen drin gelassen. Den "Rest" habe ich dann in die header.php eingetragen, die so ausschaut:

PHP

<?php 
/** 
 * @package WordPress 
 * @subpackage Default_Theme 
 */ 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> 
<head profile="http://gmpg.org/xfn/11"> 
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title> 
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> 
    <style type="text/css" media="screen"> 
        <?php 
            // Checks to see whether it needs a sidebar or not 
            if ( empty($withcomments) && !is_single() ) { 
        ?> 
        #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; } 
        <?php } else { // No sidebar ?> 
            #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } 
        <?php } ?> 
    </style> 
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>  
    <?php wp_head(); ?> 
</head> 
<body <?php body_class(); ?>>
<?php 
    $bgs=array( 
        '01.jpg', 
        '02.jpg', 
        '03.jpg',
        '04.jpg',
        '05.jpg',
        '06.jpg',
        '07.jpg',
        '08.jpg',
        '09.jpg', 
    ); 
    shuffle($bgs); 
?> 
<?php get_sidebar(); ?>
<div id="kopf">
    <ul> 
        <li><a name="top" href="<?php echo get_option('home'); ?>/">Startseite</a></li> 
        <?php wp_list_pages('title_li=&exclude=3,1471,1881&depth=1' ); ?>
    </ul>&nbsp;
</div>
<div id="oben" style="background-image: url(Grafiken/logo/<?php echo $bgs[0];?>); ">
    <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> 
    <p><?php bloginfo('description'); ?></p>
</div>

Alles anzeigen

Doch leider wird kein Hintergrundbild angezeigt. Wo liegt denn mein Fehler?

Hoffe ihr könnt mir helfen.
LG
Muckel

Edit: Das Problem liegt darin, dass der Pfad des Hintergrundbildes ab der URL gesucht wird und nicht im Theme Ordner. Das müsste ich noch irgendwie ändern.

Muckel

Lösung gefunden!

Vor dem Pfad des Hintergrundbildes noch dieses schreiben:

PHP

<?php bloginfo('template_directory'); ?>/

und es funktioniert.

Danke euch!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wechselndes Hintergrundbild - wo die Variable definieren?

Jetzt mitmachen!