Оффлайн html страница, смена фона.

Если менять картинку через несколько минут - то это слайдер, а часов\дней - попробуйте сделать как в этой статье: http://webformyself.com/kak-sozdat-pereklyuchatel-tablic-stilej-css-orientirovannyj-na-vremya/

Kiprian, На днях сделал себе как раз скриптик, который меняет картинку фона, можно задавать в сss, а адреса самих картинках спрятаны в невидимом диве. Если подойдет и хоть немного разбираетесь в jquery - могу скинуть. вот как тут в шапке: http://gymn9.minsk.edu.by

2 строчки php кода и все

Sysler, Хотелось бы увидеть такое чудо на рнр.... Только если статичная картинка, меняющаяся при релоаде страницы...

Увы но не разбираюсь я, хотя там тоже jquery задействован.

Конечно хорошо бы менять фон при обновлении страницы или раз в сутки.

---------- Добавлено 29.09.2015 в 15:04 ----------

Может кто нибудь глянет за небольшое вознаграждение? Просто очень бы хотелось... только вот я в этом не силён, по этому и прошу помощи.

за ранее благодарен.

Неужели не у кого нет желания помочь даже за небольшое вознаграждение?

Kiprian, вот это ставите в файл стилей и корректируете под ваши нужды

    .hd-border{

        width: 50%;

        height: 300px;

        background-color: rgba(234, 236, 218, 0.46);

        /*background-image: url("/images/kitchen_adventurer_cheesecake_brownie.jpg");*/

        /*transition: all 6s;*/

        border: 2px solid black;

        overflow: hidden;

        position: relative;

    }

    .hd{

        width: 100%;

        height: 300px;

        background-color: rgba(234, 236, 218, 0.46);

        /*background-image: url("/images/kitchen_adventurer_cheesecake_brownie.jpg");*/

        /*transition: all 6s;*/

        /*border: 2px solid black;*/

        position: relative;

    }

    div.mask-in {

        background-color: rgba(8, 3, 6, 0.7);

        bottom: 0;

        height: 50px;

        position: absolute;

        width: 100%;

        z-index: 999;

    }



    h3{

        text-align: center;

        /*padding-top: 4px;*/

        font-size: 18px;

        color: #f5f5f5;

        vertical-align: middle;

        /*padding-top: 4%;*/

    }

    .sc-left{

        background-color: rgba(119, 139, 136, 0.89);

        border-radius: 20px;

        float: left;

        margin-top: 18%;

        font-size: 35px;

        margin-left: -17px;

        color: white;

        width: 10%;

        height: 15%;

        text-indent: 20px;

        cursor: pointer;

        position: relative;

        z-index: 999;



    }

    .sc-left:before {

        content: "◄";

        /* Добавляем желаемый символ перед элементом списка */

    }

    .sc-right{

        background-color: rgba(119, 139, 136, 0.89);

        border-radius: 20px;

        float: right;

        margin-top: 18%;

        font-size: 35px;

        margin-right: -17px;

        color: white;

        width: 10%;

        height: 15%;

        text-indent: 17px;

        cursor: pointer;

        z-index: 999;

        position: relative;

    }

    .sc-right:before {

        content: "►";

        /* Добавляем желаемый символ перед элементом списка */

    }

код и вызов jquery в хедер или футер

   <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>



<script>



    $(document).ready(function(){

        var i = 0;

        var spd = 1500;

        var dltme = 8000;

        var images = $(".x-slider").map(function(indx, element){

            return $(element).html();

        });

        var x = images.length;

        //alert (x);

        $('.hd').css('background','url(' + images[x-1] +') no-repeat center center #000').animate({opacity: 1},spd);



           chBack(i);





    function chBack(i){



        setInterval(function(){

            $('.hd').animate({opacity: 0}, spd, function() {

                if (i >= images.length) {

                    i=0;

                }

                $(this).css('background','url(' + images[i++] +') no-repeat center center #000').animate({opacity: 1},spd);



            });

        }, dltme);

        //dltme = 6000;

    }



    })

</script>

в любом месте страницы вставляем этот код, в нем прописываем свои пути до картинок

<div style="display:none">

    <div class="x-slider">/images/kitchen_adventurer_caramel.jpg</div>

    <div class="x-slider">/images/kitchen_adventurer_cheesecake_brownie.jpg</div>

    <div class="x-slider">/images/kitchen_adventurer_donut.jpg</div>

    <div class="x-slider">/images/kitchen_adventurer_lemon.jpg</div>

    <div class="x-slider">/images/pic1.jpg</div>

    <div class="x-slider">/uploads/pict_аренда авто в грузии_548810.jpg</div>

    <div class="x-slider">/uploads/pict_2016-acura-nsx-detroit-photo-21-700x400_d8bdb7.jpg</div>

    <div class="x-slider">/uploads/pict_python_3b1c96.jpg</div>

</div>

там где вы хотите выводить слайдер, ставите следующий код:

 <div class="hd"></div>

если нужно адаптировать - это сами