CSS | свойство background-size

Опубликовано: 3 Февраля, 2022

Свойство background-size в CSS используется для установки размера фонового изображения.

Синтаксис:

 фоновый размер: авто | длина | обложка | содержать | начальный | наследование;

Стоимость недвижимости:

auto: It is used to set background-size property to its default value. It is used to display the background-image to its original size.

Syntax:
```
background-size: auto;
```

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            background-size Property
        </title> 
          
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"); 
                background-size: auto;
                background-repeat: no-repeat;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>background-size: auto;</h2>
    </body> 
</html>                                                

Output:

length: используется для установки ширины и высоты фонового изображения. Первое значение указывает ширину, а второе значение указывает высоту фонового изображения в пикселях, pt, em и т. Д. Если какое-либо значение не указано, то оно устанавливается на авто.

Syntax:
```
background-size: length;
```

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            background-size Property
        </title> 
          
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"); 
                background-size: 400px 450px;
                background-repeat: no-repeat;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>background-size: length;</h2>
    </body> 
</html>                                     

Output:

percentage: It is used to set the width and height in terms of percentage as related to the parent element. The first value indicate the width, and the second value indicate the height of the background image. If any value is not given the it is set to auto.

Syntax:
```
background-size: percentage;
```

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            background-size Property
        </title> 
          
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"); 
                background-size: 50%;
                background-repeat: no-repeat;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>background-size: percentage (%);</h2>
    </body> 
</html>                                  

Output:

cover: It is used to resize the background image to cover a whole container element.

Syntax:
```
background-size: cover;
```

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            background-size Property
        </title> 
          
        <style> 
            body { 
                background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"); 
                background-size: cover;
                background-repeat: no-repeat;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2>background-size: cover;</h2>
    </body> 
</html>                           

Output:

Поддерживаемые браузеры: браузеры, поддерживаемые свойством background-size , перечислены ниже:

Google Chrome 4.0, 1.0 -webkit-
Internet Explorer 9.0
Firefox 4.0, 3.6-moz-
Опера 4.1, 3.0 -webkit-
Safari 10.5, 10-о-

Picked CSS

CSS | свойство background-size

РЕКОМЕНДУЕМЫЕ СТАТЬИ