Случайная картинка через CSS

Мой любимый сайт про Прагу работает на wordpress. Нашел я для него красивую темку и долго долго пилил ее. И тут мне захотелось, чтоб фоновая картинка сайта рандомно менялась при переходе внутри сайта, или при обновлении странички. В php я полный -1, но опытным путем было выяснено, что фоновая картинка выводится описанием стиля тега BODY в файле CSS

Конкретно в файле style.css вот этот код

body {
background: #ffffff url(images/bg.jpg) no-repeat center top;
}

Я наделал несколько картинок нужного размера с названиями bg1.jpg, bg2.jpg, bg3.jpg, bg4.jpg… и закинул их в папку с картинками темы. Думал, что я вставлю php код который рандомно генерирует цифры в ссылке к файлу фона сайта. Вот только у меня ничего не получилось. Код php в файле css упорно не хотел обрабатываться. Полтора часа гугления, и где то на просторах буржуйского интернета, я нашел как это осуществить. В папке с темой создаем файл .htaccess, и в него вставляем строчку

AddType application/x-httpd-php .css

Теперь код php работает. Вот только все стили темы послетали. Через еще часик упорного чтения со словарем буржуйских форумов, было выяснено, что файлы css не обрабатываются браузером, так как в их заголовке не обозначено, что это именно файл стиля. Значит во все файлы CSS в начало файла надо вставить

<?php header('Content-type: text/css'); ?>

теперь в фале стиля у меня код

body {
background: #ffffff url(images/bg<?php echo rand(1,6); ?>.jpg) no-repeat center top;
}

То есть рандомно генерится цифра от 1 до 6 и подставляется в ссылку к файлу с картинкой. Зачем там ECHO?. Потому что код php надо не только обработать но еще и подставить в строку результат.

К сожалению, после прочтения кучи страниц на нерусском языке, я не могу привести источники где нашел это решение, я тупо не могу найти опять эти странички, а в закладки добавить не догадался((

Запись опубликована в рубрике Сделал Сам с метками , . Добавьте в закладки постоянную ссылку.

14 комментариев: Случайная картинка через CSS

  1. mike говорит:

    спасиб! реально помогло… искал как сделать рандомную картинку через CSS … супер!

  2. Денис говорит:

    Проще было вставить вместо картинки php файл и внего всего прописать
    у меня на сайте так
    background: #fff url(images/t_img.php) repeat-x bottom left;

    и в t_img.php нужный код, у меня только не рандомно картинки выдаются, а в зависимости от времени суток в Ангарске. Днем дневная картинка, ночью ночная

  3. mike говорит:

    а можно пример кода привести отображения картинки в зависимости от времени?
    благодарю заранее за помощь!

    • Денис говорит:

      < ?php header('Content-Type: image/jpeg'); $date_today = date("m.d.y"); $today[1] = date("H:i:s"); //echo("текущее время: $today[1] дата: $date_today
      ");

      $h_time = explode(":", $today[1]);
      $h_t=$h_time[0];

      //$h_t=20;

      //echo "$h_t
      ";

      if ($h_t>=7 and $h_t < =18) { $data_1=file_get_contents("http://www.angarsk-photos.ru/wp-content/themes/fallseason-10/images/angarsk.jpg"); //echo"с 7 до 19"; } else { $data_1=file_get_contents("http://www.angarsk-photos.ru/wp-content/themes/fallseason-10/images/angarsk-night.jpg"); //echo"с 19 до 7"; } echo"$data_1"; ?>

      • Name говорит:

        Отличный пример! Спасибо, но не работает в Google Chrome версия 23.0.1271.97 m. В фаерфоксе и ИЕ все ок. У Вас как ведет себя код?

  4. mike говорит:

    единственное что заметил, что если делать через CSS и рефрешить страницу… в 1-м случае из 10-и картинка вобще не грузится… может конечно проблема эксплоера.

  5. Пендостанец говорит:

    А не подскажете, как сделали на «Хочу в Прагу» внизу справа фото, чтобы оно справа висело. Куда его прописывать?

    • Bucher говорит:

      так уже было в теме, я только картинку заменил
      вот все что относится к этой картинке
      в файле индекс.пхп
      div id="base2"
      в файле стиля
      #base2{
      position:absolute;
      overflow:hidden;
      width:950px;
      margin:0px auto;
      top:0px;
      background:url('images/bg_footer.jpg') no-repeat bottom right;
      }

  6. Пендостанец говорит:

    Спасибо. Буду пробовать. Заодно подписался на RSS.
    Еще попробую освоить картинку рандомную сверху.

  7. ILYA говорит:

    Чето не вышло

  8. Быдлокодер говорит:

    Ути, как круто! :з

  9. Наиль говорит:

    Спасибо ! 🙂

  10. Вадим говорит:

    var imagesarr = new Array(«picture1.gif», «picture2.gif», «picture3.gif»);

    var los = Math.floor(Math.random() * imagesarr.length)

    document.write («»);

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *