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

227

04 апреля 2017, 09:35

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap-3/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="bootstrap-3/css/header_style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <div class="ggg">gggg</div>
    <img src="images/earth.png">
</body>

Файл bootstrap-3/css/header_style.css:

.ggg {
background-image: url("images/earth.png");   // пробовал еще и так  url(images/earth.png)  url('images/earth.png')
height: 200px;
}

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

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

CSS хранится в своей папке, и при обращении к картинке он пытается в своей папке найти папку images и в ней уже картинку. Попробуйте поиграть с путем файла посредством ("../") в начале пути. Это поднимает ссылку по каталогам на один уровень вверх.

background-image: url("../images/earth.png");

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

Как с помощью регулярок добавить html class?

Получение html кода страницы

OWIN. Аутентификация через Facebook не работает

ASP.NET OracleDataAdapter.Update