Losowy background w css


(Kloc221) #1

Tak jak w temacie chciał bym zrobić losowy background w css - tylko nie wiem jak ?


(Sitemaster) #2

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


(Kloc221) #3

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 :frowning:


(Grzesie K) #4

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. :smiley:

Wszystko działa- sprawdziłem.


(Kloc221) #5

Okej dzięki Grzesie1k działa :slight_smile:

-- 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 ??


(Grzesie K) #6

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


(Kloc221) #7

dałem padding-top:40px; i przesunął mi się tekst ale obraz także się rozciągnął trochę w dół... ??


(Grzesie K) #8

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ść :smiley:


(Kloc221) #9

Okej dzięki działa :slight_smile:

Tylko ma straszne opóźnienie i chyba muszę poszukać "szybszego rozwiązania"


(Grzesie K) #10

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.


(Sitemaster) #11

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.


(Damgora) #12

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 ):wink: 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.