- Desde
- 16 Nov 2013
- Mensajes
- 1.589
Tutorial Fondo Aleatorio con PHP y CSS
Bueno este tutorial es realmente bastante basico, sin embargo entre ayer y hoy me han preguntado mucho como es que hago en mi web para que cambie el fondo cada que se actualiza la pagina.
Como decia es bastante ba¡sico, unicamente necesitamos crear un array con las url de nuestras imagenes y hacer el reemplazo de estas en nuestro css con la funciona rand() de php.
Ejemplo:
La variable imagenes es un vector, y se empieza a indexar de 0 en delante, el valor por ejemplo de $imagenes[3] es una direccion, cuando sea llamada la variable, la salida sera: back_main4.jpg y que pasa con esto, que podemos usar en lugar de un numero definido otra variable, en este ejemplo $i=rand(0,6); y tiene como valor definido un randowm entre 0 y 6, es decir que cada que sea llamada su salida seria de forma aleatoria un 0,2,6,4,2,3,1,0,2, etc.
Una vez que ya tenemos direcciones aleatorias, ahora vamos a incrustarlas en nuestro CSS, y esto bastante, pero bastante simple; basta con hacer un echo
Ejemplo:
En este ejemplo, la propiedad background-image llama a una url (que es donde esta localizada nuestra imagen) en lugar escribir una direccion fija, escribiremos nuestra variable $imagenes, con esto la salida del navegador seria:
background-image: url(back_main.jpg);
background-image: url(back_main3.jpg);
background-image: url(back_main1.jpg);
background-image: url(back_main6.jpg);
Es decir, obtendremos la direccion de nuestra imagen y esta seria siempre una distinta cada que se llame al archivo. No importa si el css es un archivo externo o incrustado en el html donde estamos insertando nuestro codigo php, lo importante es que al llamar al archivo en cuestion se encuentre el codigo php y el css.
Espero que les funciones :encouragement:
Saludos
Bueno este tutorial es realmente bastante basico, sin embargo entre ayer y hoy me han preguntado mucho como es que hago en mi web para que cambie el fondo cada que se actualiza la pagina.
Como decia es bastante ba¡sico, unicamente necesitamos crear un array con las url de nuestras imagenes y hacer el reemplazo de estas en nuestro css con la funciona rand() de php.
Ejemplo:
Insertar CODE, HTML o PHP:
<?php
//Creamos un array con las imagenes a enlistar
$imagenes[0]='back_main.jpg';
$imagenes[1]='back_main2.jpg';
$imagenes[2]='back_main3.jpg';
$imagenes[3]='back_main4.jpg';
$imagenes[4]='back_main5.jpg';
$imagenes[5]='back_main6.jpg';
$imagenes[6]='back_main7.jpg';
// Elegimos un rango aleatorio entre 0 y nuestro ultimo valor del array (6)
$i=rand(0,6);
?>La variable imagenes es un vector, y se empieza a indexar de 0 en delante, el valor por ejemplo de $imagenes[3] es una direccion, cuando sea llamada la variable, la salida sera: back_main4.jpg y que pasa con esto, que podemos usar en lugar de un numero definido otra variable, en este ejemplo $i=rand(0,6); y tiene como valor definido un randowm entre 0 y 6, es decir que cada que sea llamada su salida seria de forma aleatoria un 0,2,6,4,2,3,1,0,2, etc.
Una vez que ya tenemos direcciones aleatorias, ahora vamos a incrustarlas en nuestro CSS, y esto bastante, pero bastante simple; basta con hacer un echo
Ejemplo:
Insertar CODE, HTML o PHP:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(<? echo $imagenes[$i];? /*remplazamos la url por la variable $imagenes*/?>);
background-repeat: repeat-y;
}En este ejemplo, la propiedad background-image llama a una url (que es donde esta localizada nuestra imagen) en lugar escribir una direccion fija, escribiremos nuestra variable $imagenes, con esto la salida del navegador seria:
background-image: url(back_main.jpg);
background-image: url(back_main3.jpg);
background-image: url(back_main1.jpg);
background-image: url(back_main6.jpg);
Es decir, obtendremos la direccion de nuestra imagen y esta seria siempre una distinta cada que se llame al archivo. No importa si el css es un archivo externo o incrustado en el html donde estamos insertando nuestro codigo php, lo importante es que al llamar al archivo en cuestion se encuentre el codigo php y el css.
Espero que les funciones :encouragement:
Saludos
