Cómo establecer tamaño de la imagen de fondo el uso de CSS?

Aquí, vamos a aprender sobre la configuración de una imagen en el fondo – cómo el tamaño del conjunto imagen de fondo con CSS?

Introducción:

Como todos sabemos que las imágenes son una forma muy creativa todavía muy sensible para mostrar su página web o sitio web a los usuarios. Las imágenes también juegan un papel importante en entregarse a los usuarios a páginas web o páginas web. Las imágenes son una forma muy inteligente para representar cualquier tipo de información a través de colores y el arte.

Ahora que sabemos la importancia y necesidad de las imágenes, ¿por qué no pensamos en el tema que nos ocupa, que es ¿cómo podemos ajustar el tamaño de la imagen de fondo el uso de CSS en nuestro sitio web o una página web y para responder a esa curiosidad, ¡sigue leyendo!

Método:

Para establecer el tamaño de la imagen de fondo se utiliza la propiedad fondo de tamaño de CSS.

Sintaxis:

    Element{
background-size:auto|length|cover|contain;
}

Valores:

Ahora que tenemos una idea básica de esta propiedad y la forma en que ayuda a cambiar el tamaño de la imagen en nuestra página web o una página web, así que vamos a seguir adelante en este artículo y llegar a conocer acerca de los diferentes valores de esta propiedad.

Esta propiedad contiene 4 valores a la fondo de tamaño propiedad y se enumeran a continuación,

  1. automático
  2. longitud
  3. cubierta
  4. contener

Vamos a discutir estas propiedades uno por uno.

1) de fondo de tamaño: auto

El valor auto de la propiedad fondo de tamaño es útil para visualizar el tamaño original de la imagen en términos de longitud y anchura. También es el valor class.

Sintaxis:

    Element{
background-size:auto;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: auto;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>

salida

How to set background image size using CSS? - 4

En el ejemplo anterior, se utiliza valor de la propiedad auto .

2) de fondo de tamaño: longitud

El valor longitud de la propiedad fondo de tamaño es útil para mostrar la anchura y la altura de la imagen por la elección del usuario. El primer valor se utiliza para establecer la anchura y la segunda se utiliza para ajustar la altura de la imagen.

Nota : Si sólo se da un valor, el segundo se pone en auto por class.

Sintaxis:

    Element{
background-size:width height;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: 600px 200px;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>

salida

How to set background image size using CSS? - 5

En el ejemplo anterior, se definen los anchura y longitud de la imagen.

3) de fondo-size: cubierta

El valor cubierta de la propiedad fondo de tamaño es útil para redimensionar el tamaño original de la imagen en términos de longitud y anchura para cubrir todo el recipiente. También se puede estirar o reducir la imagen para cubrir todo el contenedor, si es necesario.

Sintaxis:

    Element{
background-size:cover;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>

salida

How to set background image size using CSS? - 6

En el ejemplo anterior, la imagen es de corte para encajar el contenedor.

4) de fondo de tamaño: contener

El contener valor de la fondo de tamaño propiedad es útil para redimensionar el tamaño original de la imagen en términos de longitud y anchura para asegurarse de que la imagen es totalmente visible para el usuario.

Sintaxis:

    Element{
background-size:contain;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: contain;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>

salida

How to set background image size using CSS? - 7

En el ejemplo anterior, la imagen es completamente visible para el usuario con la ayuda de fondo -size: contener .


Deja un comentario

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