1

Проект написан на ларавель 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 подключен верно и работает (решил не засорять код примерами его работы)

5
  • 1
    А хватает размера маленького блока gggg чтобы узреть фон? Размер фона на размер блока не влияет...
    – DNS
    3 апр 2017 в 11:34
  • ну....у меня вообще никаких настроек на блок div class=ggg не стоит кромеbackground, ну сейчас задам параметры попробую 3 апр 2017 в 11:37
  • размер совпадает.....рисунок влазит в блок 3 апр 2017 в 11:40
  • В теге img путь просчитывается относительно html-файла, в css - относительно файла css
    – Crantisz
    3 апр 2017 в 12:12
  • )) приведите URL к этой странице
    – DNS
    3 апр 2017 в 14:06

5 ответов 5

5

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

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

www/bootstrap-3/css/header_style.css

а картинка

www/images/earth.png

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

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

4

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

8
  • DNS, спасибо за совет и я уверен, что оно сработает,но есть один момент... сейчас я делаю это на локальном сервере (адресс будет один), потом залью на рабочий сервер (адресс измениться), а после уже дам человеку и он сам себе будет заливать на хостинг (третий адрес)...поэтому Ваше предложение в моем случае не актуально... 3 апр 2017 в 12:17
  • 1
    Смысл в том, чтобы через Инспектор кода посмотреть, какой адрес отдается для картинки из CSS. Обычно этого хватает для устранения проблемы.
    – labris
    3 апр 2017 в 12:19
  • 1
    @Александр так храните URL сайта в переменной и, если что, формируйте ссылку от него. Я так тоже напоролся на проблемы с переносом от локали - ЧПУ меняло адресацию всех относительных ссылок.
    – DNS
    3 апр 2017 в 12:52
  • DNS, спасибо за рекомендацию!))буду так делать в дальнейшем, это, действительно очень удобно!но хотелось бы разобраться все-таки с внутренними адресами и понять где я что-то упустил... 3 апр 2017 в 13:04
  • 1
    @Александр, или задавайте новый вопрос (тут уже нагромождение), или разбирайтесь по ситуации. Сложностей особых нет - загружаются инструкции стилей/картинок и идет запрос на их содержимое. Но запрос делает браузер и формирует ссылки от базы (URL). А эта база мжет быть искажена ЧПУ, редирректом и т.п.
    – DNS
    3 апр 2017 в 13:10
3

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

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

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

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

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

3
  • да, спасибо, исправили, но эт я просто невнимательно написал в вопросе, я сделал изменение, проблема остается открытой... 3 апр 2017 в 11:48
  • 1
    Если прописать полный путь к картинке в CSS (с http://) - должно работать. Где-то путь неверный, в этом все дело.
    – labris
    3 апр 2017 в 11:50
  • просто мне нужно КОНКРЕТНЫЙ файл, который у меня в проекте, а по ссылке работает, конечно же. В том то и вопрос, что я не могу понять ГДЕ именно я с путями напутал.... 3 апр 2017 в 12:11
2

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

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

2

Советую открыть консоль разработчика в Chrome F12, открыть вкладку network и посмотреть URL по которому подгружается изображение и найти проблему. Что касается пути, попробуйте такой вариант /images/earth.png

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.