CSS - Fondos

Este capítulo le enseña cómo establecer fondos de varios elementos HTML. Puede establecer las siguientes propiedades de fondo de un elemento:

los background-color La propiedad se utiliza para establecer el color de fondo de un elemento.
los background-image La propiedad se utiliza para establecer la imagen de fondo de un elemento.
los background-repeat La propiedad se utiliza para controlar la repetición de una imagen en segundo plano.
los background-position La propiedad se utiliza para controlar la posición de una imagen en el fondo.
los background-attachment La propiedad se utiliza para controlar el desplazamiento de una imagen en segundo plano.
los background La propiedad se usa como una abreviatura para especificar una serie de otras propiedades de fondo.

Establecer el color de fondo

A continuación se muestra el ejemplo que demuestra cómo establecer el color de fondo de un elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

Esto producirá el siguiente resultado:

Establecer la imagen de fondo

Podemos configurar la imagen de fondo llamando a imágenes almacenadas locales como se muestra a continuación:

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Producirá el siguiente resultado:

Repite la imagen de fondo

El siguiente ejemplo demuestra cómo repetir la imagen de fondo si una imagen es pequeña. Puede usar el valor de no repetición para la propiedad de repetición de fondo si no desea repetir una imagen; en este caso, la imagen se mostrará solo una vez.

Por defecto , la propiedad background-repeat tendrá un valor de repetición .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Producirá el siguiente resultado:

El siguiente ejemplo que demuestra cómo repetir la imagen de fondo verticalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Producirá el siguiente resultado:

El siguiente ejemplo demuestra cómo repetir la imagen de fondo horizontalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Producirá el siguiente resultado:

Establecer la posición de la imagen de fondo

El siguiente ejemplo demuestra cómo establecer la posición de la imagen de fondo a 100 píxeles del lado izquierdo.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Producirá el siguiente resultado:

El siguiente ejemplo demuestra cómo establecer la posición de la imagen de fondo a 100 píxeles del lado izquierdo y 200 píxeles hacia abajo desde la parte superior.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Producirá el siguiente resultado:

Establecer el archivo adjunto de fondo

El archivo adjunto de fondo determina si una imagen de fondo es fija o se desplaza con el resto de la página.

El siguiente ejemplo demuestra cómo configurar la imagen de fondo fija.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Producirá el siguiente resultado:

El siguiente ejemplo demuestra cómo configurar la imagen de fondo de desplazamiento.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Producirá el siguiente resultado:

Propiedad de taquigrafía

Puede utilizar la propiedad de fondo para establecer todas las propiedades de fondo a la vez. Por ejemplo

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

↰ Previous page Next page ↱