Почему в css не работает background image

CSS Background-Position не работает в .class

Недавно пробовал сделать спрайт-лист с css и классами для некоторых иконок. и обнаружил, что класс css не работает с background-position, но теперь ID работает, может кто-нибудь объяснить мне, почему он это делает.

Мой актуальный код. Я набрал свой вопрос быстро и сделал несколько ошибок из-за этого.

Это не работает

Но когда я меняю значок 1 на идентификатор, он работает

3 ответа

В вашем классе css .class неверное свойство фона. Попробуйте background-image:url вместо url .

Попробуйте ввести и в url указать путь к изображению.

Как вы говорите, второй вариант сработал для вас. Можете ли вы привести их пример на jsfiddle? Потому что моя точка зрения тоже не работает.

background-size не работает. Как исправить очевидное?

Я просто пытаюсь иметь фоновое изображение внутри div со свойством размера ‘cover’. Независимо от того, что изображение всегда отображается в полном размере в пределах div. Что бы я ни установил в размере фона, ничего не работает.

Я просмотрел все похожие ответы на SO, но пока ничего не помогло.

Что мне не хватает?

2 ответа

Может быть пара причин, почему ваш фон не работает. Вы не совсем указали, что не работает, но вот мои рекомендации:

1. Ваше изображение может быть неверным. Проверьте свою консоль, чтобы увидеть, есть ли ошибка 404 для пути к файлу фоновое изображение, я не могу точно определить точную проблему в вашем коде, но взгляните на свою консоль и убедитесь. Это может быть местоположение вашего изображения.

2. Удалите background-position: center Прокомментируйте это и проверьте еще раз, потому что центрирование вашего изображения в теге div, который будет покрыт этим изображением, бесполезно. Так что попробуйте удалить его.

3. Измените размер фона на 100% 100% Лично я экспериментировал с размером фона, и у меня все сработало на 100% 100%. Попробуйте, и он должен сработать.

Надеюсь, это было полезно, если вам вообще нужны какие-либо разъяснения, не стесняйтесь комментировать :).

Почему не работает background-image?

Проект написан на ларавель resources/views/welcome.blade.php:

Картинка earth.png из свойства background-image не срабатывает. в то время, как от тега img она работает. В чем может быть причина? П.С.: файл header_style.css подключен верно и работает (решил не засорять код примерами его работы)

images/earth.png — это относительный путь.

То есть если у тебя css файл лежит скажем в

то для подклчения в css нужен путь ../../images/earth.png (2 каталога вверх по иерархии — до корня сайта)

Либо используй абсолютный путь вида /images/earth.png

Действительно, попробуйте полный путь. Ведь фоновый рисунок запрашивается после загрузки сайта. Если у Вас есть редирректы или ЧПУ, то запрос рисунка фона будет URL+image/earth.png. Проверьте, нет ли тут конфликта.

<img src="https://ru.stackoverflow.com/questions/647780/images/earth.png"> или — как в CSS — image/earth.png — есть небольшая разница в названиях директорий: images и image.

По всей видимости, причина в этом. (ответ на первую версию вопроса).

Ответ на вторую версию вопроса: (в любом случае где-то указан неверный путь к картинке из CSS файла).

Если прописать полный путь к картинке в CSS (с http://) — должно работать. Где-то путь неверный, в этом все дело.

Обычно для устранения проблемы достаточно посмотреть через Инспектор кода, какой адрес отдается для картинки из CSS, и понять, где затык.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *