Imagen de fondo estirable usando CSS

  2. HowTo
  3. CSS Howtos
  4. Imagen de fondo estirable usando CSS
Naila Saad Siddiqui 20 junio 2023
CSS CSS Background
  1. Estilo CSS en una página web
  2. Propiedad CSS tamaño de fondo
Imagen de fondo estirable usando CSS

Este breve artículo trata sobre el uso de CSS para diseñar su página HTML, centrándose en diseñar una imagen de fondo de cualquier elemento HTML.

Estilo CSS en una página web

Hay varias formas de usar CSS en su página web:

  • CSS en línea: CSS en línea significa que usa el atributo estilo con cualquier elemento HTML y aplica cualquier propiedad de estilo a ese elemento específicamente.
  • CSS interno: el CSS interno se utiliza si desea aplicar estilo a una sola página de su sitio web. Entonces, escriba las propiedades de estilo en esa página encerradas en el elemento <estilo>.
  • CSS externo: CSS externo es el tipo de CSS que se utiliza para aplicar estilo a todas las páginas del sitio web. Entonces crea una hoja de estilo que contiene diferentes tipos de selectores y propiedades de estilo e incluye esa hoja de estilo en todas las páginas web de su sitio web.

Hay múltiples propiedades CSS para aplicar diferentes tipos de estilos. Para este artículo, nos centraremos en la propiedad background-size utilizada para establecer el tamaño de la imagen de fondo de cualquier elemento.

Propiedad CSS tamaño de fondo

Esta propiedad CSS se usa cuando hemos aplicado cualquier fondo (imagen, por ejemplo), y necesitas establecer el tamaño o la posición de esa imagen de fondo dentro de ese elemento. Hay cuatro formas de configurar el tamaño de fondo.

  • Utilice la palabra clave para establecer el tamaño. Las palabras clave son auto, cover y contain.
  • Use la sintaxis de un valor, donde especifica solo el ancho y la altura se establece en auto.
  • Use una sintaxis de dos valores, en la que proporcione valores de ancho y alto.
  • Utilice varios valores para el tamaño de fondo.

La sintaxis de la propiedad de tamaño de fondo.

background-size: auto|contain|cover|initial|inherit|percentage|length
Palabra clave Definición
auto Este es el valor predeterminado en el que la imagen de fondo se muestra en su tamaño original.
contain En este valor, la imagen de fondo se redimensiona para que sea completamente visible en el elemento.
cover En este valor, la imagen de fondo se redimensiona para llenar el contenedor del elemento, ya sea estirándolo o cortando sus bordes.
initial Establece el valor predeterminado.
inherit Hereda el tamaño de su elemento padre en el DOM.
percentage El tamaño se especifica utilizando algún valor porcentual.
length Esto es para establecer el valor en una unidad como px. Si se especifica uno, el otro se establece en auto.

Usaremos algunos de los valores discutidos anteriormente en el siguiente ejemplo.

En el siguiente ejemplo, hemos creado un elemento div que contiene un párrafo. Aplicaremos la imagen de fondo al elemento div y luego estableceremos sus diferentes tamaños para obtener la demostración de todos los valores.

Código - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

Código - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

En este CSS, hemos creado dos selectores de identificación diferentes y les hemos aplicado diferentes propiedades. En container1,, hemos configurado la imagen de fondo para que cubra el 72 % del ancho y el 52 % del alto.

Mientras que, en container2, hemos establecido el 100% de ancho y el 100% de alto de la imagen de fondo.

En el siguiente ejemplo, usaremos el valor cover del background-size. Solo un contenedor div será suficiente en la página HTML.

Código - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Código - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

Podemos ver que la imagen de fondo está cubierta para llenar todo el elemento div.

Usaremos el valor de la propiedad como contener en el siguiente ejemplo para ver su resultado.

Código - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

Tenga en cuenta que la imagen de fondo es completamente visible en el elemento div y no se estira para cubrir todo el elemento.

Por lo tanto, podemos ver cómo podemos establecer la propiedad de tamaño de fondo y hacer que la imagen se pueda estirar o sea visible según nuestras necesidades y requisitos. Recuerda que estas propiedades se pueden aplicar a cualquier elemento HTML, al igual que el elemento div.

Artículo relacionado - CSS Background