Como colocar imágenes de fondo con CSS

¡Comparte nuestro contenido!

El día de hoy, vamos a trabajar en algo muy básico. Tenemos una imagen, queremos colocarla de fondo en nuestra web, pero a veces se ve muy grande y no se ve completa o es demasiado pequeña y se ve “pixeleada”; por eso mismo, vamos a probar algunas de las propiedades background de CSS.

Coloquemos nuestra imagen de fondo

Después de crear un archivo HTML y colocar el esqueleto base, abrimos una etiqueta <style> para hacer nuestras pruebas. Pongamos una imagen de fondo con background-image:

body{
   background-image: url(fondo.jpg);                
}

Y estamos así:

Como colocar imágenes de fondo con CSS - CableNaranja

Cambiar la posición de la imagen

Por supuesto, la imagen no se ve completa, así que utilizaremos la propiedad background-position que acepta los valores siguientes:

background-position: bottom; /* Abajo */
Como colocar imágenes de fondo con CSS - CableNaranja
background-position: center; /* Centro */
Como colocar imágenes de fondo con CSS - CableNaranja
background-position: left; /* Izquierda */
Como colocar imágenes de fondo con CSS - CableNaranja
background-position: right; /* Derecha */
Como colocar imágenes de fondo con CSS - CableNaranja
background-position: top; /* Arriba */
Como colocar imágenes de fondo con CSS - CableNaranja

Cambiar el tamaño del fondo

Sin importar la opción que usemos, background-position no muestra correctamente la imagen, esto empeora si cambiamos de tamaño la ventana.

Como colocar imágenes de fondo con CSS - CableNaranja

Pensando en esto, utilizaremos ahora la propiedad background-size que contiene los siguientes valores:

background-size: auto; /* Ajuste automático */
Como colocar imágenes de fondo con CSS - CableNaranja
background-size: contain; /* Escalar sin recortar */
Como colocar imágenes de fondo con CSS - CableNaranja
background-size: cover; /* Escalar y recortar */
Como colocar imágenes de fondo con CSS - CableNaranja

Podemos notarlo si cambiamos el background-position a center:

Como colocar imágenes de fondo con CSS - CableNaranja

Fijemos la imagen de fondo

Para asegurarnos que la imagen quede en el tamaño apropiado, nos falta fijar la imagen de fondo. Para lograr esto, utilizaremos la propiedad background-attachment que tiene 3 valores:

  • inherit: Heredar este valor de su objeto padre
  • scroll: La imagen se mueve dentro de la pantalla junto al bloque que la contiene.
  • fixed: la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.

Apliquemos el valor fixed:

background-attachment: fixed;

Y el resultado es bastante satisfactorio.

Como colocar imágenes de fondo con CSS - CableNaranja

Repetir una imagen de fondo

Si necesitamos repetir un patrón, tenemos que tomar en cuenta al dirección en la que queremos repetir la imagen, para ello utilizaremos la propiedad background-repeat. Para probarlo, cambiemos la imagen de fondo por un patrón de ladrillos.

Como colocar imágenes de fondo con CSS - CableNaranja

Los valores que soporta este propiedad son los siguientes:

background-repeat: no-repeat; /* No repetir */
Como colocar imágenes de fondo con CSS - CableNaranja
background-repeat: repeat; /* Repetir en X,Y */
Como colocar imágenes de fondo con CSS - CableNaranja
background-repeat:repeat-x; /* Repetir en X */
Como colocar imágenes de fondo con CSS - CableNaranja
background-repeat:repeat-y; /* Repetir en Y */
Como colocar imágenes de fondo con CSS - CableNaranja
background-repeat: round; /* Intenta repetir en círculos */
Como colocar imágenes de fondo con CSS - CableNaranja
background-repeat: space; /* Repite en X con márgenes */
Como colocar imágenes de fondo con CSS - CableNaranja

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares