CAMBIAR EL FONDO PARA MI SITIO WEB

Y aqui vemos como cambiar el fondo de tu sitio web es tan facil solo basta agregar uno o dos estilos css al head y a la vez es complicado porque elegir el mejor fondo de tantas convinaciones que puedes lograr aveces puedes no decidirte a la primera pero lo importante en que va a ser al gusto de cada

quien.

Cambiar la apariencia del fondo se logra usando las propiedades del atributo background en el body o en otro caso puede ser otra etiqueta que se encuentra por encima del body para eso checa el video estara al final de este blog, 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 pues entonces no te preocupes solo copias tal como esta el ccodigo y lo colocas en el head y eliminas los atributos que no vas a ocupar.

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

DEMO1 DEMO2 DEMO3 DEMO4 DEMO5