COPIA EL ESTILO CSS Y AGREGA UNA IMAGEN GIF DE LA GALERIA QUE ENCONTRARAS AQUI
Para empezar vamos a ver una cosa podemos poner un fondo animado con imagenes gif para que tu sitio siempre este en movimiento y lusca alegre y juqueton tambien se puede colocar una imagen en hd con excelente calidad y acomodarla para que se adapte a todo tipo de pantallas de diferentes tamaños de tal forma que siempre se vea igual.
Esto se logra usando las propiedades del atributo background en el body del sitio web, si cuentas con plantilla propia busca en el css la etiqueta body y agrega las propiedades que se encuentran en el cuadro de texto que esta mas abajo, ahora te comento sus funciones, si en caso de no tener acceso a la hoja de estilos de tu sitio copia completo todo lo que se encuentra en el cuadro de texto y pegalo en el head osea la cebecera, actuara de la misma manera.
<style type="text/css">
body{
background-color: #ccc; /*color en codigo hexadecimal o rgb*/
background-size: 500px 320px; /*contain, cover, pixel,porcentaje*/
background-image: url(image.jpg);
background-repeat: no-repeat; /*no-repeat , repeat*/
background-position:50% 50%; /*porcentaje, pixel o indicar con palabras en ingles, top center*/
background-attachment: fixed; /* scroll, fixed*/
}
</style>
Cualquier atributo que no necesites lo puedes omitir.
Ahora te explico su funcionamiento el primer atributo es background-color y con este colocas un color solido de fondo este le he puesto- la propiedad #ccc un color gris claro, los colores los encuentras buscando en google paleta de colores hexadecimales en html, lo normal seria escribir #cccccc en 6 letras y o numeros ya que es un codigo hexadecimal pero no importa cuando los 6 son la misma letra o numero escribir 3 es correcto.
En el atributo background-image se indica la direccion url de la imagen que tomara de fondo.
El atributo background-size es complemente del anterior se utiliza para modificar las dimensiones de la imagen que usas de fondo sus propiedades son contain, cover, tambien se indica en pixeles o porcentaje. La propiedad contain escala la imagen de tal manera que se pueda ver completa dentro del area de contenido. La propiedad cover escala la imagen de fondo para ser tan grande como sea posible para que el area de fondo este completamente cubierta, parte de la imagen de fondo puede no estar a la vista. Indicar medida exactas es posible indicando la medida en pixeles 100px 100px tomando en cuenta el orden ancho - alto asi mismo puedes utilizar porcentajes si en caso el area de fondo tiene propiedades responsive 100% 100% el ancho y alto se estiraran lo que sea posible para cubrir completamente el area de contenido.
El atributo backgroun-repeat indicas si la imagen de fondo debe repetirse, o no, para cubrir por completo el fondo.
Background-position indicas la posición que tomara la imagen (siendo esta mas pequeña que el fondo) con respecto al área de contenido ya sea en pixeles o porcentaje 100px 100px el orden seria izquierda y arriba el mismo orden para los porcentajes 50% 50% la imagen quedaria al centro del area de contenido.
background-attachment, se usa la propiedad scroll para que mientras tu bajas por el sitio web con la barra de desplazamiento la imagen va quedando atras, de otro modo la propiedad fixed mantiene en un solo lugar el fondo siempre visible.
Para los fondos animados con imagenes gif solo necesitas lo siguiente aqui te dejo un enlace a mis imagenes gif ubica la imagen das clic derecho y seleccionas copiar direccion de imagen y lo agregas al codigo donde dice image.gif, vease singuiente caja de texto:
<style type="text/css">
body{
background-image: url(image.gif);
}
</style>
dudas y comentarios las respondere con gusto los mensajes se me notifica al instante cuando realizan un comentario, comparte si te gusto.
Aqui 5 demos de como seria un fondo animado:
Escribir comentario