Почему изображение не отображается, если в свойстве background задано значение cover?

Почему при использовании сокращённого свойства background с указанием `cover` отображается ошибка "invalid property value", хотя при использовании `background-size: cover` всё работает корректно? Это нормальное поведение?
  • 15 октября 2024 г. 12:52
Ответы на вопрос 2
Да, это нормальное поведение, и оно связано с тем, как работают свойства CSS.

1. **Свойство `background` vs. `background-size`**:
   - Свойство `background` — это сокращенное свойство, которое позволяет задать несколько свойств одновременно: цвет фона, изображение, положение, повторение и размер. Однако, используя сокращенное свойство `background`, вы должны соблюдать правильный порядок и синтаксис значений.
   - Например, если вы хотите использовать `background-size: cover`, вы не можете просто включить `cover` в сокращенное свойство `background`, так как это не соответствует ожидаемому синтаксису.

2. **Правильный синтаксис**:
   Чтобы задать изображение фона с размером `cover`, вам нужно явно указать его в своем CSS. Вот корректный пример:

   ```css
   background-image: url('image.jpg');
   background-size: cover;
   ```

   Или, если вы используете сокращенное свойство, это будет выглядеть так:

   ```css
   background: url('image.jpg') no-repeat center center / cover;
   ```

   Здесь часть `center center` отвечает за позиционирование изображения, а `/ cover` задает размер.

3. **Ошибка "invalid property value"**:
   Когда вы используете сокращенное свойство `background` и просто добавляете `cover` без указания изображения, появляется ошибка, потому что значение `cover` не может быть интерпретировано в контексте того, что ожидается в позиции для сокращенного свойства.

Таким образом, использование `background-size: cover` и правильный порядок значений в сокращенном свойстве `background` позволяют избежать ошибок и корректно отображать фоновое изображение.
Потому что надо использовать правильный синтаксис. 

Правильно:
background: url("../images/hogwarts.jpeg") center / cover no-repeat;


https://doka.guide/css/background/#kak-pishetsya
Похожие вопросы