Como cambiar el background usando CSS. Como poner una imagen de fondo con CSS. Imagen de fondo en HTML

[infobox style=”alert-info”] Ahora tenemos un video-tutorial “Como Cambiar el Background con CSS” disponible, haz clic aca: https://youtu.be/vbPvZNRimwU [/infobox]

 

Una de los cosas que mas deseamos hacer cuando estamos armando nuestro website es poder cambiar el background. Poner una imagen de esquina a esquina o usar una imagen como patron para que se repita por todo el fondo o simplemente cambiar el color para darle un toque mas personal a nuestra página.

Es fundamental entonces aprender a usar e implementar esta propiedad de CSS.

La familia de propiedades ‘background’ de CSS comprende:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background-clip
  • background-origin
  • background-size
  • background-quantity
  • background-spacing
  • background

Esta propiedad, como cualquier otra propiedad de CSS, se aplica al documento HTML de una de las siguientes maneras:

  1. En el elemento mismo, así: <body style=”propiedad-CSS”></body>
  2. En el encabezado del documento HTML, así: <style> propiedad-CSS </style>
  3. O aplicado desde un documento con la lista de estilos CSS.

background-color

Como su nombre lo indica, esta propiedad establece el color de fondo (background) de un elemento HTML. Si, el color de fondo de un elemento HTML, osea si quiero cambiar el color de fondo de la página entera aplicare esta propiead al elemento <body>, asi:

<body style=”background-color:#orange> “Es una propiedad muy versátil, podemos usar los nombres de los colores, o los valores hexadecimales de un color”

Aprende Intentando …

[editr item=”post-653″ html=”cssBackgroundColor.html” css=”cssBackgroundColor.css” scrollbar=”dark” theme=”monokai” wrap=”true”]

[divider]

background-image

Bastante fácil, establece la imagen que ira de fondo de un elemento HTML. Para poner la imagen simplemente apuntaremos al URL de la misma, así:

<body style=”background-image: url(http://www.miweb.com/imagenes/laimagen.png)”>

La imagen a anexar puede estar disponible en cualquier parte del internet, el URL no tiene que ser el de tu servidor local.

Aprende Intentando …

[editr item=”post-664″ html=”cssBackgroundImage.html” css=”cssBackgroundImage.css” scrollbar=”dark” theme=”monokai” ]
[divider]

background-repeat

Lo normal es que cuando pongas una imagen de fondo esta se repita horizontal y verticalmente hasta cubrir todo el elemento. Esta propiedad por ende se usa en conjunción con ‘background-image’. La propiedad background-repeat se usa entonces con uno de estos 4 valores:

  1. repeat-x Repite la imagen horizontalmente
  2. repeat-y Repite la imagen verticalmente
  3. no-repeat No repite la imagen en ningún axis.
  4. inherit Usa el mismo valor de background-repeat de la propiedad pariente de esta.

Ejemplo:

<body style=”background-image: url(http://www.miweb.com/imagenes/laimagen.png); background-repeat: repeat-x;”>

 

background-attachment

Esta propiedad establece como la imagen de fondo se movera cuando se desplace hacia arriba o hacia abajo la ventana del navegador. El comportamiento típico es que la imagen este en unisono con los demás elementos de la página. Con esta propiedad podemos dejar el fondo quieto y que solo se desplace el texto o cualquier otro elemento de la página. Como la propiedad anterior, esta propiedad debe usarse en conjunto con ‘background-image’ y los valores que toma son: scroll o fixed.

Ejemplo:

<body style=”background-image: url(http://www.miweb.com/imagenes/laimagen.png); background-attachment: fixed;”>

 

background-position

La propiedad background-position se usa para indicar la posición exacta de la imagen en la pagina o elemento. Se debe usar en conjunto con la propiedad ‘background-image’. Siempre posicionando la imagen con la combinación X, Y(X será el valor en pixels empezando a contar desde la esquina superior izquierda y Y será el valor en pixels empezando desde el tope del navegador)

Ejemplo:

<body style=”background-image: url(http://www.miweb.com/imagenes/laimagen.png); background-position:20px 50px;”>

  1.  Esta propiedad tambien tomar los valores X, Y en porcentajes, donde el porcentaje es relativo al ancho de la ventana del navegador.
  2. X, también puede tomar los siguientes valores: left, center y right.
  3. Y, también puede tomar los siguientes valores: top, center y bottom.

 

background-clip

Esta propiedad existe únicamente para determinar desde donde debe extenderse la imagen de background sobre el elemento donde se esta usando. En alguna ocasión necesitaremos que la imagen de fondo no empiece desde el borde mismo sino desde el padding del elemento, por esta misma razón los únicos valores de esta propiedad serán: border o padding.

Una de las maneras mas usadas para esta propiedad es en tablas, por esa razón usare de ejemplo una tabla.

<table><tr><td style=”background-image: url(fondoCasilla.jpg) background-clip: padding;”></td></tr></table>

En el ejemplo anterior, la imagen de fondo no empieza desde el borde sino desde la distancia dada al padding.

 

background-size

Esta propiedad, background-size, le da mas control al tamaño de la imagen de fondo. Usa 3 valores: auto, un valor numérico bien sea en pixels o en porcentaje. El valor auto simplemente deja la imagen en su tamaño original. En caso de que se especifiquen 2 valores en pixels, por ejemplo, el primero sera usado para el ancho y el segundo para el alto de la imagen. Por ejemplo:

<body style=”background-image: url(http://www.miweb.com/imagenes/laimagen.png); background-size:20px 50px;”>

 En el ejemplo anterior, al haber dado 2 valores numéricos en pixels, el primero indicara el ancho (20px) y el segundo el alto (50px) de la imagen.

 

background-quantity

Esta propiedad indicara cuantas veces se deberá de repetir la imagen previamente establecida con background-image.

<body style=”background-image: url(laimagen.png); background-quantity:5>

Sin muchas mas explicaciones, la imagen en el ejemplo anterior se habrá de repetir 5 veces.

 

background-spacing

Cuando ponemos una imagen de fondo y esta se repite para llenar el elemento en el cual estamos aplicando esta propiedad, podemos ajustar el espacio que hay entre esta imagen que se esta repitiendo con, background-spacing.

<body style=”background-image: url(laimagen.png); background-spacing:5>

 Espero hayan entendido y empiecen a poner mas en práctica esta propiedad CSS, si tienen preguntas o necesitan ayuda por favor dejen nos un mensaje.

4 thoughts on “Como cambiar el background usando CSS. Como poner una imagen de fondo con CSS. Imagen de fondo en HTML

  1. Hola ya lo intente pero ahora me aparece en todos los menus, menos en HOME, un encabezado con la leyenda: body.custom-background { background-color: #000000; }
    Como puedo retirarla ? Gracias !

Add Comment