¿Como cambiar el fondo de mi sitio web?

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

 

Background-position indicas la posición que tomara la imagen de 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, cuando queda oculta en la parte inferior la imagen de fondo usas la propiedad scroll para que la imagen se mueva mientras bajas con la barra de desplazamiento, de otro modo la propiedad fixed mantiene en un solo lugar el fondo.

 

 

 

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 la copias en el codigo donde dice image.gif

 

 

 

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

 


Escribir comentario

Comentarios: 0