CSS Background

La propiedad backgrounden CSS se utiliza para establecer el fondo de un elemento. Puede ser utilizada para establecer el color de fondo, establecer una imagen de fondo, establecer la posición de una imagen de fondo, establecer si una imagen de fondo se debe repetir o no, y establecer si una imagen de fondo se debe fijar o desplazarse con el contenido.

La sintaxis básica de la propiedad de fondo es:

background: valor1 valor2 valor3 valor4;
Lenguaje del código: CSS (css)

Por ejemplo, si quieres establecer el fondo de un elemento en verde, puedes usar el siguiente código:

element {
    background-color: green;
}
Lenguaje del código: CSS (css)

También puedes establecer una imagen de fondo utilizando la propiedad background-image:

element {
    background-image: url('image.jpg');
}
Lenguaje del código: CSS (css)

La propiedad background puede ser abreviada para establecer varios valores de fondo de una sola vez. Por ejemplo:

element {
  background: green url('image.jpg') no-repeat center center;
}
Lenguaje del código: CSS (css)

En este caso, el fondo es verde, la imagen es “image.jpg” y no se repite y se posiciona en el centro.

Aprende HTML y CSS en un fin de semana (Spanish Edition)

Ver Ofertas en Amazon

La Guía de HTML5, CSS3 y JavaScript: 2ª Edición

Ver Ofertas en Amazon

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition)

Ver Ofertas en Amazon

Ejemplo de uso

Aquí tienes un ejemplo de cómo utilizar la propiedad background en CSS para establecer el fondo de un elemento en HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* establece el fondo en verde */
      body {
        background-color: green;
      }
      /* establece el fondo en una imagen */
      #header {
        background-image: url('image.jpg');
        background-repeat: no-repeat;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>Bienvenido</h1>
    </div>
    <p>Este es un ejemplo de uso de la propiedad background en CSS</p>
  </body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el fondo del body se establece en verde, mientras que el fondo del elemento con id header se establece en una imagen llamada “image.jpg”. La imagen no se repite y está en el centro.

Puedes probarlo con un fondo de tu elección y verificar como se ve en tu navegador.

Propiedades relacionadas

La propiedad background en CSS tiene varias propiedades relacionadas que te permiten personalizar el fondo de un elemento con mayor detalle:

background-color: Establece el color de fondo del elemento. Puede ser un valor de color en formato hexadecimal, RGB o un nombre de color.
background-image: Establece una imagen de fondo para el elemento. El valor debe ser una URL que apunta a la imagen.
background-repeat: Controla si la imagen de fondo se repite o no. Los valores posibles son repeat, repeat-x, repeat-y y no-repeat.
background-position: Controla la posición de la imagen de fondo. Puede ser un valor en formato x y o un valor predefinido como center, top, bottom, left o right.
background-attachment: Controla si la imagen de fondo debe estar fija o debe desplazarse con el resto del contenido. Los valores posibles son scroll y fixed.
background-clip: Controla el área donde se aplica el fondo. Los valores posibles son border-box, padding-box y content-box.
background-size: Controla el tamaño de la imagen de fondo. Puede ser un tamaño fijo en pixels, un porcentaje, o valores como cover o contain.
background-origin: Controla el lugar donde se aplica el fondo. Los valores posibles son border-box, padding-box y content-box.
background-blend-mode: Controla el modo de mezcla de las capas de fondo. Los valores posibles son varios modos como normal, multiply, screen, overlay, entre otros.
background: Es una propiedad abreviada para establecer varios valores de fondo de una sola vez, como el color, la imagen, la posición de la imagen, si se repite la imagen o no.

Ejemplos

Aquí tienes algunos ejemplos detallados de cómo utilizar las propiedades relacionadas con la propiedad background en CSS con código HTML:

background-color: Para establecer el fondo de un elemento en rojo, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .red-background {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <div class="red-background">Este elemento tiene un fondo rojo</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-image: Para establecer una imagen de fondo para un elemento, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-repeat: Para establecer que la imagen de fondo se repita horizontalmente, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-position: Para establecer que la imagen de fondo se posicione en el centro, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-position: center;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-attachment: Para establecer que la imagen de fondo sea fija, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-clip: Para establecer que el fondo se aplique en la caja del borde, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-clip: border-box;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-size: Para establecer que la imagen de fondo se ajuste al tamaño del elemento de manera que cubra todo el fondo, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-origin: Para establecer que el fondo se aplique en la caja del borde, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-origin: border-box;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background-blend-mode: Para establecer que los colores de la imagen de fondo se multipliquen con el color del fondo, puedes utilizar el siguiente código:

<html>
<head>
  <style>
    .background-image {
      background-image: url('imagen.jpg');
      background-blend-mode: multiply;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

background: Es una propiedad abreviada para establecer varios valores de fondo de una sola vez, como el color, la imagen, la posición de la imagen, si se repite la imagen o no.

<html>
<head>
  <style>
    .background-image {
      background: #ff0000 url('imagen.jpg') no-repeat center center;
    }
  </style>
</head>
<body>
  <div class="background-image"></div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

Es importante tener en cuenta que estas propiedades solo aplican al fondo de un elemento, no a su contenido. También es importante tener en cuenta que algunas de estas propiedades pueden no tener efecto si no se establece una imagen de fondo con background-image.

Color de fondo en CSS

La propiedad CSS “background-color” se utiliza para establecer el color de fondo de un elemento en una página web. El valor de esta propiedad puede ser un color en hexadecimal, un color en RGB o un nombre de color estándar.

Ejemplos:

background-color: #ff0000; /* rojo en formato hexadecimal */
background-color: rgb(255, 0, 0); /* rojo en formato RGB */
background-color: red; /* rojo como nombre de color estándar */
Lenguaje del código: CSS (css)

Además de establecer un color de fondo para un elemento específico, también es posible establecer un color de fondo para toda la página utilizando la propiedad “background-color” en el elemento “body”.

Ejemplo:

body {
    background-color: #f2f2f2;
}
Lenguaje del código: CSS (css)

En este ejemplo se establece el color de fondo de toda la página en un tono de gris claro.

Imagen de fondo con CSS

La propiedad “background-image” en CSS se utiliza para establecer una imagen de fondo en un elemento. El valor de esta propiedad debe ser una URL que apunte a la ubicación de la imagen.

Ejemplo:

body {
    background-image: url("bg.jpg");
}
Lenguaje del código: CSS (css)

En este ejemplo se establece una imagen de fondo llamada “bg.jpg” para el elemento “body”.

También es posible establecer varias imágenes de fondo para un elemento, separando las URLs con comas.

Ejemplo:

body {
    background-image: url("bg1.jpg"), url("bg2.jpg");
}
Lenguaje del código: CSS (css)

En este ejemplo se establecen dos imágenes de fondo, “bg1.jpg” y “bg2.jpg” para el elemento “body”.

Además de establecer una imagen de fondo, también es posible establecer otras propiedades relacionadas con el fondo como “background-repeat” para especificar cómo se debe repetir la imagen, “background-position” para establecer la posición de la imagen y “background-attachment” para especificar si la imagen debe desplazarse o fijarse con el contenido.

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece una imagen de fondo llamada “bg.jpg”, se establece que no se repetirá, estará en el centro del elemento y estará fijada.

Repetición de fondo con CSS

La propiedad “background-repeat” en CSS se utiliza para especificar cómo se debe repetir una imagen de fondo en un elemento.

Los valores posibles para esta propiedad son:

“repeat” (repetir): repite la imagen de fondo tanto horizontal como verticalmente hasta llenar todo el elemento.
“repeat-x” (repetir horizontal): repite la imagen de fondo horizontalmente hasta llenar todo el ancho del elemento.
“repeat-y” (repetir vertical): repite la imagen de fondo verticalmente hasta llenar todo el alto del elemento.
“no-repeat” (no repetir): muestra la imagen de fondo una sola vez, sin repetirla.

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-repeat: repeat;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece una imagen de fondo llamada “bg.jpg” y se establece que se repetirá tanto horizontal como verticalmente para llenar todo el elemento.

También es posible establecer la propiedad “background-repeat” junto con la propiedad «background» abreviada

background: url("bg.jpg") repeat;
Lenguaje del código: CSS (css)

En este caso se establece la imagen de fondo y se establece que se repetirá tanto horizontal como verticalmente para llenar todo el elemento.

Más ejemplos:

“repeat” (repetir): repite la imagen de fondo tanto horizontal como verticalmente hasta llenar todo el elemento. Ejemplo:

background-repeat: repeat;
Lenguaje del código: CSS (css)

“repeat-x” (repetir horizontalmente): repite la imagen de fondo horizontalmente hasta llenar todo el ancho del elemento. Ejemplo:

background-repeat: repeat-x;
Lenguaje del código: CSS (css)

“repeat-y” (repetir verticalmente): repite la imagen de fondo verticalmente hasta llenar todo el alto del elemento. Ejemplo:

background-repeat: repeat-y;
Lenguaje del código: CSS (css)

“no-repeat” (no repetir): muestra la imagen de fondo una sola vez, sin repetirla. Ejemplo:

background-repeat: no-repeat;
Lenguaje del código: CSS (css)

Cada uno de estos valores tiene un comportamiento diferente y se puede utilizar según lo que se necesite.

Es importante tener en cuenta que esta propiedad solo tiene efecto si se ha establecido previamente una imagen de fondo mediante la propiedad «background-image» o «background».

La propiedad “background-attachment”

La propiedad “background-attachment” en CSS se utiliza para especificar si una imagen de fondo se debe fijar o desplazarse con el contenido.

Los valores posibles para esta propiedad son:

“scroll” (desplazarse): la imagen de fondo se desplaza junto con el contenido cuando el usuario desplaza la página. Este es el valor predeterminado.

background-attachment: scroll;
Lenguaje del código: CSS (css)

“fixed” (fijo): la imagen de fondo se mantiene fija en una posición específica y no se desplaza con el contenido.

background-attachment: fixed;
Lenguaje del código: CSS (css)

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-attachment: fixed;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece una imagen de fondo llamada “bg.jpg” y se establece que estará fijada y no se desplazara con el contenido.

Es importante tener en cuenta que si se establece una imagen de fondo con la propiedad “background-attachment: fixed”, esta imagen podría no ser visible en algunas zonas de la página si el contenido se desplaza, ya que estará fija en una posición específica.

Además, también es posible establecer la propiedad “background-attachment” junto con la propiedad “background” abreviada

background: url("bg.jpg") no-repeat fixed;
Lenguaje del código: CSS (css)

En este caso se establece la imagen de fondo, se establece que no se repetirá y se establece que estará fijada.

Posición de fondo con CSS

La propiedad “background-position” en CSS se utiliza para establecer la posición de una imagen de fondo en un elemento. El valor de esta propiedad puede ser una combinación de valores horizontal y vertical, que pueden ser:

Un valor en pixels (px)
Un valor en porcentajes (%)
Un valor de palabra clave (top, bottom, left, right, center)

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-position: center center;
}
Lenguaje del código: CSS (css)

En este ejemplo, se establece una imagen de fondo llamada “bg.jpg” y se establece que estará en el centro del elemento tanto en el eje horizontal como en el eje vertical.

También es posible establecer solo un valor para la posición de fondo, en este caso el valor predeterminado para el otro eje será “center”.

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-position: bottom;
}
Lenguaje del código: CSS (css)

En este ejemplo se establece una imagen de fondo llamada “bg.jpg” y se establece que estará en la parte inferior del elemento, el valor predeterminado para el eje horizontal es center.

Además, también es posible establecer la propiedad “background-position” junto con la propiedad “background” abreviada.

background: url("bg.jpg") no-repeat center center;
Lenguaje del código: CSS (css)

En este caso se establece la imagen de fondo, se establece que no se repetirá y se establece que estará en el centro del elemento tanto en el eje horizontal como en el eje vertical.

Tamaño de imágenes de fondo

La propiedad “background-size” en CSS se utiliza para establecer el tamaño de una imagen de fondo en un elemento. Los valores posibles para esta propiedad son:

Un valor en pixels (px)
Un valor en porcentajes (%)
Un valor de palabra clave (auto, contain, cover)

Los valores “auto” es el valor predeterminado, la imagen se ajustará al tamaño del elemento.

“contain”: La imagen se escalará para ajustarse al elemento, pero sin distorsionarla. Es decir, se mantendrá la proporción original de la imagen y se podrá ver completa.

background-size: contain;
Lenguaje del código: CSS (css)

“cover”: La imagen se escalará para que ocupe todo el espacio del elemento, pero también se mantendrá la proporción original. Es posible que algunas partes de la imagen no se vean.

background-size: cover;
Lenguaje del código: CSS (css)

Ejemplo:

body {
    background-image: url("bg.jpg");
    background-size: cover;
}
Lenguaje del código: CSS (css)

En este ejemplo se establece una imagen de fondo llamada “bg.jpg” y se establece que se escalará para que ocupe todo el espacio del elemento, pero se mantendrá la proporción original de la imagen.

Además, también es posible establecer valores específicos para el ancho y el alto de la imagen de fondo utilizando dos valores separados por espacio.

background-size: 300px 200px;
Lenguaje del código: CSS (css)

En este caso, se establece que la imagen de fondo tendrá un ancho de 300px y un alto de 200px.

Es importante tener en cuenta que esta propiedad solo tiene efecto si se ha establecido previamente una imagen de fondo mediante la propiedad “background-image” o “background”.

Ejemplo con código HTML y CSS

Aquí tienes un ejemplo de código HTML y CSS que utiliza varias propiedades de fondo para establecer una imagen de fondo, que se repita verticalmente y horizontalmente, y que se mantenga fija en una posición específica mientras se desplaza el contenido:

<!DOCTYPE html>
<html>
<head>
  <style>
    #header {
      background-image: url("bg-header.jpg");
      background-repeat: repeat;
      background-position: center;
      background-attachment: fixed;
      background-size: contain;
    }
  </style>
</head>
<body>
  <header id="header">
    <h1>Este es un ejemplo de un encabezado con un fondo personalizado</h1>
  </header>
  <p>El contenido de esta página se desplaza mientras el fondo del encabezado se mantiene fijo en el centro y se repite tanto horizontal como verticalmente, manteniendo su proporción original.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se establece una imagen de fondo llamada “bg-header.jpg” para el elemento con ID “header”, se establece que se repetirá tanto horizontal como verticalmente, se establece que estará fijada y estará en el centro del elemento, y se establece que se escalará para ajustarse al elemento, pero sin distorsionarla.

Es importante tener en cuenta que la imagen de fondo “bg-header.jpg” debe estar en la misma carpeta o en una ruta accesible desde el archivo.