HTML | Propiedad de tamaño de fondo de estilo DOM

La propiedad backgroundSize del estilo HTML DOM se utiliza para establecer o devolver el tamaño de la imagen de fondo.

Sintaxis:

Para obtener la propiedad backgroundSize
```
object.style.backgroundSize
```

Para establecer la propiedad backgroundSize

object.style.backgroundSize = "auto | length | percentage | 
cover| contain |initial | inherit"

Valores devueltos: Devuelve un valor de string, que representa la propiedad de tamaño de fondo de un elemento

Valores de propiedad:

auto: Esto se utiliza para mostrar la imagen de fondo en su tamaño original. Este es el valor predeterminado.
longitud: Esto se utiliza para establecer la altura y el ancho de la imagen. Ambos valores establecen el ancho y la altura respectivamente. Si solo se da un valor, el otro se establece en ‘auto’.
porcentaje: Esto establece el ancho y la altura en términos de porcentaje del elemento principal. Ambos valores establecen el ancho y la altura respectivamente. Si solo se da un valor, el otro se establece en ‘auto’.
cover: Esto se usa para escalar la imagen de fondo para cubrir todo el elemento contenedor.
contener: Esto se utiliza para escalar la imagen de fondo lo más grande posible, de modo que tanto la altura como el ancho se ajusten dentro del área del contenedor.
initial : se utiliza para establecer esta propiedad en su valor predeterminado.
heredar : Esto hereda la propiedad de tamaño de fondo de su padre.

auto : Esto se usa para mostrar la imagen de fondo en su tamaño original, es el valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
            /* we set the size ourselves to demonstrate auto */
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
    <div class="bg-img"></div>
    
    <button onclick="changePos()">Change size of image</button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to auto
            elem.style.backgroundSize = 'auto';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

longitud: Esto se utiliza para establecer la altura y el ancho de la imagen. Ambos valores establecen el ancho y la altura respectivamente. Si solo se da un valor, el otro se establece en ‘auto’.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
    
    <div class="bg-img"></div>
    <button onclick="changePos()">Change size of image</button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to 200px in width
            // and 50px in height
            elem.style.backgroundSize = 
              '200px 50px';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

porcentaje: Esto establece el ancho y la altura en términos de porcentaje del elemento principal. Ambos valores establecen el ancho y la altura respectivamente. Si solo se da un valor, el otro se establece en ‘auto’.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
   </h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
    
    <div class="bg-img"></div>
    <button onclick="changePos()">
      Change size of image
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to 25% in width and 50% in height
            elem.style.backgroundSize = '25% 50%';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

cover: Esto se usa para escalar la imagen de fondo para cubrir todo el elemento contenedor.

Ejemplo-4:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
    
    <div class="bg-img"></div>
    <button onclick="changePos()">Change size of image</button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to cover
            elem.style.backgroundSize = 'cover';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

contener: Esto se utiliza para escalar la imagen de fondo lo más grande posible, de modo que tanto la altura como el ancho se ajusten dentro del área del contenedor.

Ejemplo-5:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    
    <p>Click on the button to 
      change the size of the background image</p>
    <div class="bg-img"></div>
    
    <button onclick="changePos()">
      Change size of image
  </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to contain
            elem.style.backgroundSize = 'contain';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

initial : se utiliza para establecer esta propiedad en su valor predeterminado.

Ejemplo-6:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
            
            /* we set the size ourselves to demonstrate initial */
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
    
    <div class="bg-img"></div>
    <button onclick="changePos()">
      Change size of image
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to initial
            elem.style.backgroundSize = 'initial';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

heredar : Esto hereda la propiedad de tamaño de fondo de su padre.

Ejemplo-7:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style backgroundSize Property</title>
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            border-style: solid;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png');
            background-repeat: no-repeat;
        }
          
        #parent {
            background-size: 100px 200px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style backgroundSize Property</b>
    <p>Click on the button to 
      change the size of the background image</p>
  
    <div id="parent">
        <div class="bg-img"></div>
    </div>
  
    <button onclick="changePos()">
      Change size of image
   </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting size to inherit
            elem.style.backgroundSize = 'inherit';
        }
    </script>
</body>
  
</html>

Producción:

Antes de pulsar el botón:
Después de presionar el botón:

Navegadores compatibles: los navegadores compatibles con la propiedad backgroundSize se enumeran a continuación:

cromo 4.0
Internet Explorer 9.0
Firefox 4.0
Safari 4.1
Ópera 10.5

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta