Не отображается изображение как background [закрыт]
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
Закрыт 5 лет назад .
Не отображает картинку. Правильность пути я проверил, background, background-image менял, кавычки ‘ » пробовал, без кавычек тоже пробовал, убирать слеш перед путем — тоже пробовал, однако изображение не отображается. В чем проблема?
Обновление
Ничего не понял, пробовал и высоту с шириной ставить, не помогло. код сейчас выглядит так:
4 ответа 4
Первым делом откройте инспектор браузера ( в Chrome f12 ).
Если картинка не загружается, то в консоли выведется ошибка ( вкладка console ). Если там ошибок нет — идем дальше
Поставьте фиксированные размеры для блока
Проверьте еще, загружаются ли у вас вообще стили. ( опять же в консоли f12 )
P.S.
На дворе уже 2015, HTML5 как год уже стандарт, не бойтесь его использовать
Блок имеет заданую ширину и высоту (если вдруг у него position: absolute|fixed)?
Сам путь к CSS файлу указан верно? (заметьте, там нет слэша)
Обновление
Путь к картинке указываем относительно css файла (без ./ тоже можно, но в шапке вопроса вы его задали вообще от корневой директории).
Добавил «div», чтобы парсер не съел, он там необязателен.
Сначала делаем так: пробуем из браузера пройти по пути к картинке и посмотреть отображается ли она. Если браузер пишет 403 или 404 значит путь указан неверно или не хватает прав доступа.
Если все гуд, тогда смотрим код и устанавливаем для начала блочный тип элемента не static а именно block устанавливаем высоту и ширину и проверяем отображается ли в блоке, если в блоке не отображается открываем инспектор скажем в хроме или в лисе и смотрим загрузило ли картинку и в консоли смотрим не зачеркнута ли она. Если зачеркнута ищем причину.
Источник
Почему не работает background-image?
Проект написан на ларавель resources/views/welcome.blade.php:
Картинка earth.png из свойства background-image не срабатывает. в то время, как от тега img она работает. В чем может быть причина? П.С.: файл header_style.css подключен верно и работает (решил не засорять код примерами его работы)
5 ответов 5
CSS хранится в своей папке, и при обращении к картинке он пытается в своей папке найти папку images и в ней уже картинку. Попробуйте поиграть с путем файла посредством («../») в начале пути. Это поднимает ссылку по каталогам на один уровень вверх.
images/earth.png — это относительный путь.
То есть если у тебя css файл лежит скажем в
то для подклчения в css нужен путь ../../images/earth.png (2 каталога вверх по иерархии — до корня сайта)
Либо используй абсолютный путь вида /images/earth.png
Действительно, попробуйте полный путь. Ведь фоновый рисунок запрашивается после загрузки сайта. Если у Вас есть редирректы или ЧПУ, то запрос рисунка фона будет URL+image/earth.png. Проверьте, нет ли тут конфликта.
По всей видимости, причина в этом. (ответ на первую версию вопроса).
Ответ на вторую версию вопроса: (в любом случае где-то указан неверный путь к картинке из CSS файла).
Если прописать полный путь к картинке в CSS (с http://) — должно работать. Где-то путь неверный, в этом все дело.
Обычно для устранения проблемы достаточно посмотреть через Инспектор кода, какой адрес отдается для картинки из CSS, и понять, где затык.
Источник
Перестал работать css, никак не работает свойство background-image
Неожиданно перестал работать css,просто никак не работает свойство background-image(вместо указанной картинки просто белый фон),по разному пробовал
Но если пихнуть картинку в html коде в див,то она отображается,и если с css начать править размеры div,то сам див правится и картинка встает на нужные места,то есть css вроде как работает
Помогите пожалуйста,в чем причина и как это решить?
| Комментарий модератора | ||
| ||
Помощь в написании контрольных, курсовых и дипломных работ здесь.
body < width:100%; height:400px; background:url(img/p1.jpg) no-repeat 50% 50% / cover;.
Не срабатывает свойство background-image в IE
Всем привет. При верстке не отображается картинка, заданная с помощью свойства background-image.
Добрый день! Не могу понять почему не подгружается картинка для background описанная в CSS.
Смена фона CSS background-image
Как в CSS поставить смену картинки фона из папки images с картинками image1.jpg-image5.jpg ? Не.
Источник
Фоновое изображение CSS не загружается
Я следил за всеми учебниками, которые все говорят, что говорят. Я указываю свой фон внутри тела в моей таблице стилей css, но страница просто отображает пустой белый фон. Изображение в одном каталоге .HTML и .страницы css. В учебнике говорится, что
устарел, поэтому я использую, в css,
нет успеха. Вот вся таблица стилей css:
14 ответов
вот еще один результат url изображения..работает нормально. я просто ставлю только образ пути..пожалуйста, проверьте..
во-первых, попрощаться с цитаты:
далее, Если ваш html, css и изображение находятся в одном каталоге, удаление кавычек должно исправить это. Если, однако, ваш css или изображение находятся в подкаталогах, где живет ваш html, вы хотите убедиться, что вы правильно путь к изображению:
надеюсь, что это помогает.
У меня была та же проблема. Проблема оказалась путем к файлу изображения. Убедитесь, что путь к изображению относительно расположения CSS-файла, а не HTML.
у меня была такая же проблема, когда я использовал background-image: url(«yourimagefolder/yourimage.jpg»);
обратите внимание на косую черту, которая сделала разницу. Уровень папку почему я не могу загрузить изображения. Я думаю, вы также столкнулись с той же проблемой
для меня следующая строка работает для меня, я помещаю ее в css моего тела (где изображение находится в той же папке, в которой мой css и .html файлы):
другое, что вы должны заботиться о том, будьте осторожны с расширением изображения, убедитесь, что ваше изображение имеет .jpeg или .расширением jpg. Спасибо
я столкнулся с такой же проблемой. Если у вас есть изображения в папках, попробуйте это
Не забудьте поставить обратную косую черту перед первой папки.
Я обнаружил, что проблема в том, что вы не можете использовать короткий URL для изображения «img/image.в JPG»
Я изменил корень документа для моего веб-сервера apache, установленного на wamp-сервере. таким образом, используя относительный url, т. е. (images / img.png) не сработало. Мне пришлось использовать абсолютный url, чтобы он работал, т. е.
следующий код работал для меня, где я поместил изображение в somefolder/assets/img / background_some_img.формат JPG
Если вы размещаете изображение и папку css внутри родительского каталога, предположим, что активы, то следующий код работает отлично. Либо двойные кавычки или без кавычек оба работают нормально.
в других случаях, например, если вы вызываете класс и пытаетесь поместить фоновое изображение в определенное место, вы также должны упомянуть высоту и ширину.
путь к изображению должен быть относительным, это означает, что если файл css находится в папке css, то вы должны начать путь с ../ например
это потому, что вы должны вернуться домой реж ../ путь, а потом /изображение/логотип.формат JPG путь к файлу изображения. Если вы включаете css-файл в сам html
этот код будет работать нормально.
Я хотел бы поделиться своим процессом отладки, потому что я застрял в этой проблеме по крайней мере на час. Не удалось найти изображение при запуске local host. Чтобы добавить некоторый контекст, я создаю стиль в приложении rails в следующем каталоге:
Я хотел сделать фоновое изображение в теге заголовка. Ниже приводится моя первоначальная реализация.
. в результате я получал следующую ошибку в rails server и консоли в Chrome dev tools, соответственно:
Я пробовал разные варианты url:
и это все еще не сработало. В тот момент я был очень смущен. Я решил переместить папку изображений из каталога assets (по умолчанию) в каталог таблиц стилей и попробовал следующие варианты url-адреса:
Я больше не получил ошибку сервера консоли и rails. Но изображение почему-то не показывалось. После временной сдачи вверх, я узнал, что решение этого было добавить свойство height для отображения изображения.
к сожалению, я до сих пор не уверен, почему 3 начальных попытки url с «../изображения / заголовок.jpg » не работал на localhost, или когда я должен или не должен добавлять точку в начале url-адреса.
это может иметь какое-то отношение к настройке тега ссылки по умолчанию в приложении.формат html.Эрб, или, может быть, это э .scss vs .УСБ вещь. Или, может быть, как работает свойство background с url () (изображение должно находиться в том же каталоге, что и файл css)? Во всяком случае, так я решил проблему с фоновым изображением CSS, не загружающимся на localhost.
Я могу принести немного помощи здесь. кажется, что при использовании say background-image: url («/images / image.jpg»); или фоновое изображение: url («images / image.jpg»); или фоновое изображение: url(«../ изображения / изображение.форматы jpg»); разные браузеры видят это по-разному. первый браузер, похоже, видит это как domain.com/images/image.jpg. второй браузер видит на domain.com/css/images/image.jpg. а финал браузер видит как domain.com/PathToImageFile/image.jpg . надеется на это помогает
У меня была такая же проблема и после прочтения этого нашел проблему, это был Слэш. Пути Windows : изображения\green_cup.формат PNG
CSS, который работал: изображения/green_cup.формат PNG
Источник
background-image не работает с локальными изображениями?
Я попробовал все, чтобы фоновое изображение отображалось с моими локальными изображениями. Я знаю, что у меня правильное местоположение изображения. потому что если я использую контент: url (); оно работает.
Фоновое изображение также работает с URL-адресом изображения из Интернета. Но он не будет отображаться с моим локальным изображением. Я перепробовал все возможные места, и он не будет отображаться.
моя папка с изображениями находится по тому же пути, что и моя папка css.
Ниже приведен HTML-код:
и теперь CSS: enter code here
Прежде чем кто-либо пометит этот повторный вопрос, я искал все ответы на этот вопрос в StackOverFlow и следовал всем советам, но все еще не могу получить изображение для рендеринга. Я знаю, что картинка находится в правильном месте, потому что с Chrome и контентом: url (); изображение работает. Есть предложения?
5 ответов
Вы пропустили свои «» цитаты
С
попробовать,
Кроме того,
- Изображение находится в том же каталоге, что и файл, на который оно ссылается?
- Изображение находится в каталоге ниже ?
- Изображение находится в каталоге над ?
Под «ниже» и «выше» я подразумеваю подкаталоги и родительские каталоги. Относительные пути к файлам дают нам возможность путешествовать в обоих направлениях. Взгляните на мой примитивный пример:
Вот все, что вам нужно знать об относительных путях к файлам:
- Начиная с «/» возвращается в корневой каталог и начинается там
- Начиная с «../», перемещается на один каталог назад и начинается там
- Начиная с «../../», перемещает две директории назад и начинает там (и так далее . )
- Чтобы двигаться вперед, просто начните с первого подкаталога и продолжайте двигаться вперед
Я использовал background вместо background-image и работает нормально. и предполагается, что pic находится в той же папке, что и ваш html.
РЕДАКТИРОВАТЬ: упущено из виду, что путь к файлу для URL не был в двойных кавычках.
Попробуйте и посмотрите, работает ли это.
Ваша единственная проблема заключалась в том, как вы написали background-image
Источник