CSS | background-image Свойство

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

Свойство background-image используется для установки одного или нескольких фоновых изображений для элемента. По умолчанию изображение размещается в верхнем левом углу. Чтобы указать два или более изображений, разделите URL-адреса запятыми.

Синтаксис:

 фоновое изображение: URL ('URL') | нет | начальный | наследование;

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

url(‘url’): When the background-image has an URL.

Syntax:
```
background-image: url("url")
```

Example-1:

<!DOCTYPE html>
<html>
  
<head>
    <title>background-image property</title>
    <style>
        body {
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png");
        }
          
        h1,
        h3 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>background-image:url;</h3>
    <div>
      GeeksforGeeks: 
      A computer science portal for geeks
    </div>
</body>
  
</html>

Output:

none:By using this property no background image will be displayed and this is by default

Syntax:
```
background-image: url("url") none
```

Example-2:

<!DOCTYPE html>
<html>
  
<head>
    <title>background-image property</title>
    <style>
        body {
            background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png") none;
        }
          
        h1,
        h3 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>background-image:url none;</h3>
    <div>
      GeeksforGeeks: 
      A computer science portal for geeks
    </div>
</body>
  
</html>

Output:

initial: It sets the property to its default value.

Syntax:
```
background-image: url("url") default
```

Example-3

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS background-image property</title>
    <style>
        body {
            background-image: 
url("https://media.geeksforgeeks.org/wp-content/uploads/rk.png") initial;
        }
          
        h1,
        h3 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>CSS background-image:url initial;</h3>
    </center>
  
</body>
  
</html>

Output:

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

Google Chrome 1.0
Edge 4.0
Firefox 1.0
Opera 3.5
Safari 1.0

Picked Web технологии CSS

CSS | background-image Свойство

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