почему мое фоновое изображение не отображается онлайн

#html #css #image

#HTML #css #изображение

Вопрос:

мое изображение не отображается на сайте. это не связывание. что меня озадачивает, так это то, что я скопировал / вставил другой класс в свой css-файл, который работает, изменил имена и в html, поскольку я перепечатал ссылку «.. / images / whats» и т. Д. visual code studio размещала следующую папку и файл по пути, поэтомуссылка действительна, но она не работает … это просто html и php, ничего особенного.

     .devant {
        background-image: url("../images/straz/indexpix.jpg") ;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative; 
        text-align: center;
        color: rgb(192, 38, 0);
        background-color: teal; 
        height: 100%;
       
    }
  

html: div class=»devant»

Комментарии:

1. Добро пожаловать в SO. Как вы его развертываете? Вы уверены, что развернутый путь фона доступен?

2. Пожалуйста, проверьте свой путь один раз, так как это может быть возможно, если есть какие-либо проблемы с доступом к пути. Кроме того, если вы работаете онлайн, ваш код должен быть на сервере, также проверьте разрешение вашей папки.

Ответ №1:

Вы должны указать ширину и высоту, чтобы свойство background работало.

 .devant {
    background-image: url("https://www.flaticon.com/svg/static/icons/svg/141/141944.svg") ;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; 
    text-align: center;
    color: rgb(192, 38, 0);
    background-color: teal; 
    height: 80px; /* height of the devant div */
    width: 80px; /* width of the devant div */
   
}
  

Комментарии:

1. я пробовал, не сработало. у меня был внутренний background-size: cover; который работал для другого … .rue { background-image: url(«../images/straz/rue.jpg «) ; фон-повтор: без повтора; фон-размер: обложка; положение: относительное; выравнивание текста: по центру; высота: 100%; } так что я не понимаю, почему не этот

2. Мы также должны упомянуть ширину и высоту. like .rue { background-image: url(«../images/straz/rue.jpg «) ; фон-повтор: без повтора; фон-размер: обложка; положение: относительное; выравнивание текста: по центру; высота: 100%; ширина: 100% / * укажите ширину также */ }

3. оооо! оно отображается на моем мобильном телефоне, но не в Firefox или Chrome???

4. Можете ли вы отправить скриншот?

5. но рута работает — всегда была, вот что странно, но я тоже добавлю ее, на случай будущих ошибок, lol. я слишком новичок, чтобы знать лучше, спасибо!

Ответ №2:

На самом деле, это работает — и работало все время, как мне сказали, — на ПК, но не на mac. извините, я не использовал правильное слово — под ПК раньше я подразумевал компьютер. глупо, так что это работает на телефоне и на ПК, но не на Mac. я не понимаю, почему