Como hacer fondos(Background) aleatorio en PHP y CSS

Como hacer fondos(Background) aleatorio en PHP y CSS

Como hacer fondos aleatorios en PHP y CSS

Este truco consiste en crear una web donde los usuarios no tengan que ver siempre la misma imágen de fondo en una web. Para lograr este objetivo es necesario seguir los siguientes pasos.

En tu index.php haz  lo siguiente.

<style type="text/css" media="screen">
<?php 
$imagenes = array("imagen1.jpg" , "imagen2.jpg");
$valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
echo "body{ background: #000 url('image/".$imagenes[$valor]."') no-repeat top right fixed;
height: 100%;
background-attachment: fixed; 
background-repeat: repeat; 
background-position: center center; 
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}";
?> 
</style>

Nota: para que esto funcione dentro de un Style, es necesario colocar ese fragmento de código php dentro de un Las imágenes deben estar en una sola carpeta.

Ejemplo completo, es así como debe quedar mas o menos.

<!DOCTYPE html>
<html lang="es">
<html>
<head>
<title>Corporativo Vera&reg; - Area del cliente</title>
	<meta charset="utf-8">
  	<meta name="description" content="">
  	<meta name="author" content="@abimaelgtp">
  	<meta http-equiv="X-UA-Compatible" content="IE-edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css" media="screen">
		<?php 
			$imagenes = array("imagen1.jpg" , "imagen2.jpg");
			$valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
			echo "body{ background: #000 url('image/".$imagenes[$valor]."') no-repeat top right fixed;
			height: 100%;
			background-attachment: fixed; 
			background-repeat: repeat; 
			background-position: center center; 
			background-size: cover;
			-moz-background-size: cover;
			-webkit-background-size: cover;
			-o-background-size: cover;
			}";
		?> 
	</style>
</head>

<body>
<h1>Hola mundo, el fondo aleatorio ya se debe mostrar, para ir viendo viendo los efectos, presione F5</h1>	
</body>
</html>

Este código está hecho para dar una idea mas o menos de como hacer este tipo de actividades, puede que existan muchos trucos.

Abimael Gutierrez P.

Abimael Gutierrez P.
Fundador de apdesc

Estilo Home de facebook usando HTML y CSS

Como crear un diseño web similar al home o incio de facebook usando HTML y CSS. En mi caso, hice lo siguiente. Crear un archivo HTML con el … Continuar leyendo