Fondos (backgrounds)

Search…

Para definir el color, la imagen, la posición, etc. de fondo de un elemento utiliza las siguientes propiedades CSS:
background-color: define el color de fondo.
background-image: define la imagen de fondo.
background-position: define la ubicación de la imagen de fondo.
background-repeat: define si se repite la imagen de fondo horizontal y verticalmente.
background-attachment: define si la imagen se mantiene fija o se desplaza con la página.
background-color
Esta propiedad define el color de fondo del elemento. Por ejemplo, para que todos los párrafos tengan un color azul utiliza la siguiente regla:
1
p {
2
  background-color: blue;
3
}
Copied!
También puedes usar un valor hexadecimal (p.e. #0000FF) o RGB (p.e. rgb(255, 0, 0)).
background-image
Define la imagen de fondo. Por ejemplo:
1
p {
2
  background-image: url('mi-imagen.jpg')
3
}
Copied!
La ruta de la imagen puede ser relativa al documento o un URL a una imagen en Internet.
background-repeat
Por defecto, cuando utilizas una imagen de fondo, la imagen se repite tanto horizontal como verticalmente (cuando no ocupa el ancho o alto del elemento).
Para cambiar este comportamiento utiliza la propiedad background-repeat que recibe las opciones:
no-repeat: no repetir horizontal ni verticalmente.
repeat-x: repetir solo horizontalmente.
repeat-y: repetir solo verticalmente.
background-position
Nos permite controlar la posición y el tamaño de la imagen cuando background-repeat es no-repeat.
background-position recibe dos valores: la posición vertical y horizontal.
Los valores de background-position pueden ser una posición en palabras (p.e. top left), un porcentaje o una posición en pixeles u otra unidad.
Por ejemplo, la siguiente regla centra la imagen en el componente:
1
p {
2
  background-image: url('imagen.jpg');
3
  background-repeat: no-repeat;
4
  background-position: center center;
5
}
Copied!
background-size
background-size nos permite cambiar el tamaño de la imagen de fondo.
background-size puede recibir dos valores: el ancho y el alto en porcentaje, pixeles o alguna otra unidad. Por ejemplo:
1
p {
2
  background-image: url('imagen.jpg');
3
  background-repeat: no-repeat;
4
  background-size: 60px 40px;
5
}
Copied!
background-size también puede recibir dos valores especiales:
cover: la imagen se estira hasta que ocupe todo el área del elemento.
contain: la imagen se estira hasta que el alto o el ancho ocupen el alto o ancho del contenedor.
background-attachment
Por defecto, cuando utilizas una imagen de fondo, la imagen se desplaza con la página.
background-attachment nos permite cambiar ese comportamiento y dejar la imagen fija cuando la página se desplace creando un efecto interesante:
1
  background-image: url('imagen.jpg');
2
  background-repeat: no-repeat;
3
  background-attachment: fixed;
Copied!
El atajo background
Puedes especificar varias propiedades de fondo en una línea con background. Por ejemplo:
1
background: #00ff00 url("smiley.gif") no-repeat fixed center;
Copied!
El orden es: background-color, background-image, background-position/background-size, background-repeat y background-attachment.
No importa si omites algunas de las propiedades. Por ejemplo, las siguientes declaraciones son válidas:
1
background: red;
2
background: url('mi-imagen');
3
background: red url('mi-imagen');
4
background: red url('mi-imagen') fixed center;
Copied!

El modelo de caja en CSS

Posicionamiento

Last modified 4yr ago

Copy link

Contents

background-attachment

El atajo background

`background-color`

`background-image`

`background-repeat`

`background-position`

`background-size`

`background-attachment`

El atajo `background`