Я пытался показать свое фоновое изображение, но, похоже, не могу этого сделать. Кто-нибудь может увидеть, что я делаю не так? - PullRequest
1 голос
/ 07 мая 2020

Это код, который я использую в своем html. Я знаю, что правильно связал свою таблицу стилей, потому что остальная часть стиля работает. Поэтому я понятия не имею, почему это конкретное c фоновое изображение просто не работает в моем коде. Он не отображается нигде на веб-странице, когда я пытаюсь загрузить его, поэтому я, честно говоря, понятия не имею, что не так.

<!DOCTYPE html>
    <html lang="en">
     <head>
      <link rel="stylesheet" href="style.css">
     </head>
     <body>
      <header class="showcase">`
      </header>
     </body>
    </html>

Это в моем css. Я трижды проверил, что имя изображения коррелирует, и оно определенно находится в папке изображений в моей основной папке, но я просто не понимаю, почему это не работает. Я немного новичок, но все еще запутался.

.showcase {
 width: 100%;
 height: 93vh;
 position: relative;
 background-image: url('../images/background.png') no-repeat center center/cover;
 }

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Спасибо за помощь, мне удалось разобраться, и теперь все работает нормально. Я удалил ../ из своего background-image: url('../images/background.png'); и изменил свой center/cover только на cover, поскольку второй center вызывал его неработоспособность. Мой новый код теперь выглядит так и отлично работает.

.showcase {
 width: 100%;
 height: 93vh;
 position: relative;
 background-image: url('images/background.png');
 background: no-repeat center cover;
 }
0 голосов
/ 07 мая 2020

Ответ заключается в том, что вы помещаете значения no-repeat center center/cover в свойство background-image вместо свойства background. На самом деле это должно выглядеть так:

.showcase {

    width: 100%;
    height: 93vh;
    position: relative;
    background-image: url('.../images/background.png');
    background: no-repeat center center/cover;
}

Это должно работать. Если нет, попробуйте изменить позицию на absolute или auto. Если все это не работает, попробуйте изменить center/cover на center или cover.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...