Tak jak w temacie chciał bym zrobić losowy background w css - tylko nie wiem jak ?
W samym css nie da rady. Musisz się tutaj wspomóc skryptem php lub js.
czyli, albo: w php losujesz i wstawiasz na sztywno
albo: na starcie losujesz w js i dynamicznie zmieniasz background
albo: robisz w php skrypt losujący i wyrzucający na wyjście obrazek, a w css w background wrzucasz url do tego skryptu zamiast url obrazka
Zrobiłem coś takiego, że dałem diva w nim napis a w css na bacgrund dałem url do skrypt.php w pliku skrypt.php zrobiłem losowe wybieranie obrazka z folderu… Ale coś kurcze mi to nie działa
Masz plik style.css
body {
background-image: url(images/background.jpg);
}
Folder images, w nim folder background.jpg, a w nim index.php
<?php
$i=0;
foreach(scandir('bg') as $plik){
$roz=substr($plik, -4);
if($roz=='.jpg' || $roz=='jpeg' || $roz=='.png' || $roz=='.gif' || $roz=='.bmp'){
$img[$i][0]='bg/'.$plik;
$img[$i][1]=$roz;
$i++;
}
}
$wyb=rand(0, count($img)-1);
switch($img[$wyb][1]){
case '.jpg':
header("Content-type: image/jpeg");
$img=imagecreatefromjpeg($img[$wyb][0]);
imagejpeg($img);
break;
case 'jpeg':
header("Content-type: image/jpeg");
$img=imagecreatefromjpeg($img[$wyb][0]);
imagejpeg($img);
break;
case '.png':
header("Content-type: image/png");
$img=imagecreatefrompng($img[$wyb][0]);
imagesavealpha($img, true);
imagepng($img);
break;
case '.gif':
header("Content-type: image/gif");
$img=imagecreatefromgif($img[$wyb][0]);
imagegif($img);
break;
case '.bmp':
header("Content-type: image/bmp");
$img=imagecreatefrombmp($img[$wyb][0]);
imagejbmp($img);
break;
}
imagedestroy($img);
?>
W tym samym folderze musi się znajdować folder bg gdzie będą znajdować się tła.
Wszystko działa- sprawdziłem.
Okej dzięki Grzesie1k działa
– Dodane 05.08.2010 (Cz) 13:33 –
Tylko jak teraz operować napisem aby zimnic jego pozycje na obrazku. Bo jak daje marginy to nie działa ??
Znaczy masz diva z losowym tłem i w nim tekst. Chcesz zmienić położenie tekstu na obrazku? Jeżeli dobrze rozumię to nie margin lecz padding
dałem padding-top:40px; i przesunął mi się tekst ale obraz także się rozciągnął trochę w dół… ??
Jeżeli masz height i padding-top lub bottom to rzeczywista wysokość jest sumą tych wartości więc jeżeli dasz padding-top: 40px; to od height odejmij tą właśnie wartość
Okej dzięki działa
Tylko ma straszne opóźnienie i chyba muszę poszukać “szybszego rozwiązania”
Główne opóźnienie w tym wypadku będzie zapewne wynikało z czasu przesyłania obrazka z serwera do użytkownika i jedynym rozwiązaniem jest zmniejszenie wagi obrazka.
Optymalizacja wagi, potem wykorzystanie cache i ewentualny preloading.
Poza tym, można by ograniczyć liczbę rotacji by nie zmieniało co odświeżenie strony ale np co jakiś interwał czasowy - i tu mozesz wykorzystać ciasteczka.
a może lepiej darować sobie przetwarzanie tych grafik skryptem, a po prostu wstawić wylosowaną nazwę do stylu.
Np.
<?php
$bg = 'lokalizacja_folderu_grafik';
$grafiki = preg_grep('/^\w+\.(jpeg|jpg|png|gif)$/i', scandir($bg));
echo '';
?>
wklejone w HEAD w kodzie strony. w tym wypadku tło losowane jest dla body, ale można to przecież zmienić. albo można też zmienić rozszerzenie pliku .css na .php dodać linijke
<?php header("Content-type: text/css"); ?>
i we właściwym miejscu arkusza stylów (pomiędzy background-image:url( a ) dodać
<?php $bg = 'lokalizacja_folderu_grafik'; $grafiki = preg_grep('/^\w+\.(jpeg|jpg|png|gif)$/i', scandir($bg)); echo $bg.'/'.array_rand($grafiki)); ?>
Należy też pamiętać, że skoro plik stylów zmienił rozszerzenie to trzeba to uwzględnić w kodzie strony tzn. np.
Na pewno zadziała nieco szybciej, choć nie zniweluje czasu potrzebnego na samo pobranie grafiki przez przeglądarkę internauty, ale o tym już pisali Grzesie1k , api.