Не работает background-image
Здравствуйте. У меня такая проблема. Свойство background-image не работает в файле css. Я понимаю, что дело скорее всего в местоположении картинки. Но не понимаю, что не так я оформила. Я перебрала уже многие комбинации из гугла, но ничего не помогло. Может кто-нибудь подскажет? Причем, если вместо background-image (картинка), указать background-color, то фон закрашивает правильно. А так, белый фон.
Вот код стиля
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
BODY P P.green P.red < text-align: justify;color:red >P.blue P.pink < text-align: justify;color:PaleVioletRed >.color .style P.first < font-family: Times New Roman; font-style:oblique; font-weight: 900;font-size: 25pt; text-align: center;color:purple >A:LINK A:VISITED A:ACTIVE A:HOVER
Не работает background-image
Здравствуйте. Наткнулся на проблему — background-image не работает. <HTML> <head> <title>.
Не работает background-image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN".
Не работает background-image
У меня такая же ситуация: при том что картинка jpg, хранится в подпапке где стоит css и html.
Не работает background-image
Здравствуйте. Столкнулся с такой проблемой. Не работает background-image. Точнее работает но не из.
Ann1984, во-первых проверьте путь до изображения, присутствует ли картинка по указанному адресу.
Во-вторых, попробуйте
BODY { font-family: Times New Roman; background: url ( ..img/18.jpg ) no-repeat center; background-size: cover; }
Qwerty_Wasd, путь проверила. Картинка на месте.
Ваш код попробовала, тоже не сработал.
Не может быть причина в весе картинки? (читала о таком на просторах), но она и весит всего 28 КБ.
И по поводу местоположения картинки. Она лежит в папке css, в этой же папке лежит и сам файл css. Но она помещена еще в папку img. Может я что-то тут напутала?
Сообщение было отмечено Ann1984 как решение
Решение
Опан , спасибо огромное. Помогло. Значит путь я все-таки указала правильно, все дело было в пробелах. Про них я даже и не думала.
ответ с бородой, тем не менее может помочь новичкам понять суть проблемы, почему один и тот же путь работает в HTML, а в CSS — нет.
background-image не работает если: 1- неверный синтаксис либо 2-неправильный путь. Что касается синтаксиса, путем проб работали следующие варианты с пробелами и кавычками и без них
background-image:url( ../images/metalic-cup.gif );
background-image: url( ../images/metalic-cup.gif );
background-image:url(‘../images/metalic-cup.gif’);
background-image:url(«../images/metalic-cup.gif»);
background-image: url(‘../images/metalic-cup.gif’);
background-image: url(«../images/metalic-cup.gif»);
background-image: url( ‘../images/metalic-cup.gif’ );
background-image: url( «../images/metalic-cup.gif» );
Главное между URL и открывающей скобкой не ставить пробел !
Что касается пути, многие новички (в т.ч. и я) не могли понять почему относительный путь, указанный в HTML срабатывает, а тот же путь скопированный в CSS — нет. Проблема в пути и относительном расположении файлов: html, css и изображения. Когда указание background-image происходит непосредственно в html-файле, то и путь до изображения следует представлять относительно этого HTMLфайла. В случае, когда в CSS-файле мы указываем background-image , следует брать во внимание путь от CSS-файла до изображения, а не путь от HTML до изображения.
Не работает background-image
Здравствуйте, проблема в том что я хочу задать фон для блока картинкой, но она не отображается .
Не работает background-image
Здравствуйте! Продолжаю писать сайт, и тут в голову пришла идея соединить две картинки в одном.
В mozille и IE не работает transition на background-image
Префиксы стоят, но эти два браузера просто игнорят анимацию фона. В остальных браузерах все работает
Не работает background-image для отображения спрайта
Ребят, я чего-то не понимаю. Подскажите, пжл, почему у меня не работает бекграунд для спрайта.
Не работает background-image для двух кнопок меню
Ситуация в следующем : не работает background-image для двух кнопок меню ошибок я не вижу.
Перестал работать css, никак не работает свойство background-image
Неожиданно перестал работать css,просто никак не работает свойство background-image(вместо.
Почему в css не работает background-image?
Здравствуйте.
Почему-то не вставляется фоновое изображение через background в css. Чего я только не перепробывал. И кавычки и просто background, но изображение так и не отображается.
В чем проблема?
Класс .top-slide
- HOME
- PORTFOLIO
- BLOG
- ABOUT US
- CONTACT
we belive
in quality design
ANY CREATIVE PROJECT IS UNIQUE
AND SHOULDER IMPROVIDED WITH
THE APPROPRIATE QUALITY
body < font-family: 'Poppins', sans-serif; >* < padding: 0; margin:0; >li < list-style: none; display: flex; >a < text-decoration: none; >header < background: #f6f6f6; padding: 22px 0; >.header-container < width: 90%; margin: 0 auto; display: flex; justify-content: space-between; >.header-container a < color: #000; font-size: 16px; padding: 27px 6px; margin-right: 32px; >.header-container a:hover < background: #ffeb00; >#menu-checkbox < display: none; >ul < display: flex; >nav < margin-top: 20px; text-transform: uppercase; >.top-slide < padding-top: 120px; background-image: url("..img/slider.jpg"); >.top-container < width: 85% margin: 0 auto; >h2 < text-transform: uppercase; >.top-slide h2 < background-color: #ffeb00; display: inline; font-size: 50px; >.top-slide:nth-child(2) < margin-bottom: 10px; >.top-slide p < background-color: #3f3f44; color: #ffffff; display: inline; font-size: 18px; >@media screen and (max-width: 420px) < .header-container < width: 100%; display: flex; justify-content: space-around; >.main-menu < display: none; >.main-menu li < width: 100%; display: block; font-size: 12px; >.main-menu a < display: block; padding: 8px; >.toggle-button < text-align: center; display: block; cursor: pointer; color: #000; >.toggle-button:after < content: attr(data-open); display: block; >#menu-checkbox:checked + nav[role="navigation"] .main-menu < display: block; >#menu-checkbox:checked + nav[role="navigation"] .toggle-button:after < content: attr(data-close) >.header-container a < margin-right: -65px; >.main-menu < position: relative; top: 30px; right: 115px; >>CSS фоновое изображение не отображается
У меня есть файл HTML с подкаталогом под названием img с изображением с именем debut_dark.png . В моем файле CSS у меня есть:
HTML файл имеет тег body и действительно содержит файл CSS. Я точно знаю, что файл CSS включен правильно, так как все остальное отформатировано правильно. Фоновое изображение не отображается, я вижу только белый фон. Любые идеи, как исправить это, или даже как его отладить?
Проверьте правильность URL-адреса изображения. Откройте инструменты разработчика и откройте вкладку сети, там должен быть указан ваш debut_dark.png. Проверьте, был ли он загружен вообще
Если вы хотите что-то отладить (HTML / JS / CSS) — вы всегда можете открыть какие-то инструменты разработчика, доступные для всех современных браузеров (обычно достаточно F12, но для FF вам может потребоваться установить Firebug).
Похоже, что изображение не загружено. Подкаталог img находится в том же каталоге, что и HTML-файл. Изображение там. Я использую img/debut_dark.png в качестве пути, и он не работает.
@Darksky Вы пытались использовать некоторые инструменты разработчика? Кроме того — каков путь к вашему HTML-файлу (это важно знать)?
8 ответов
Согласно вашему пути к файлу CSS, я предполагаю, что он находится в том же каталоге с вашей HTML-страницей, вы должны изменить url следующим образом:
Вы должны использовать следующее:
или попробуйте проверить правила CSS с помощью Firefox Firebug.
Я понял .. Это должен был быть URL («../ img / debut_dark.png»). Я просто понял, что путь должен быть относительно файла CSS, а не файла HTML (очевидно).
У меня такая же проблема. Но он работает правильно для меня
background: url(../img/debut_dark.png) repeat Я знаю, что это не касается точного случая OP, но для других, поступающих из Google, не забудьте попробовать display: block; на основе типа элемента. У меня было изображение в , но оно не появлялось.
Убедитесь, что ваше тело имеет высоту, f.ex:
Да, это ключ. У меня был такой код, и он не работал: .legaltech-procedure .legaltech-proc-details-left span.jp < display: block; background-image: url("/images/flags/1x1/jp.svg"); background-repeat: no-repeat; background-size: 25px 25px; >но затем я добавил min-width: 100%; min-height: 100%; и он отобразил изображение.
Хорошо, я понял, что этот атрибут отображает изображение, когда в нем содержится полное местоположение. Я просто загрузил это изображение на свой сервер и связал местоположение этого изображения в фоновом изображении: url ( «xxxxx.xxx» ); атрибут, и, наконец, он работал, но если у вас нет сервера, попробуйте ввести полное местоположение изображения в атрибуте, перейдя в свойство этого изображения. Хотя я использовал этот атрибут в теге HTML файла, но он наверняка работает и с файлом CSS. Если этот метод не работает, попробуйте загрузить изображение в Интернете, например, поведение, facebook, instagram и т.д., И проверьте изображение и скопируйте его в свой атрибут. Надеюсь, что это будет работать
Не работает background-image
Здравствуйте. Столкнулся с такой проблемой. Не работает background-image. Точнее работает но не из css.
Когда я в самой странице прописываю стили. То все работает. А когда пытаюсь подключить css то не работает. Остальные стили тянет без проблем. А вот картинку в упор не хочет видеть.
Вот код HTM
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>Testr/title> link href="css/style.css" rel="stylesheet" type="text/css" /> /head> body> div id="maket"> div id="header">Шапка /div> div id="left">Левая колонка Меню Меню Меню Меню/div> div id="content">Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы/div> div id="rasporka">/div> /div> div id="footer">Подвал/div> /body> /html>
Вот код CSS
@charset «utf-8»;
/* CSS Document */
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-image:url(img/bg.jpg); } #left{ background-color:#00C0C0; width:200px; float:left; } #content{ background-color:#8080FF; margin-left:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }
Вот не работает background-image:url(img/bg.jpg); я пробовал и background-image:url(/img/bg.jpg); и background-image:url(./img/bg.jpg); Ничего не помогает.
Зато если прямо в HTM прописать, то все работает.
Почему не подключается CSS в HTML (код написан верно)?
Файл style.css находится в одной папке с HTML файлом, синтаксис в обоих файлах соблюден (дебаг запускался в двух источниках, нет ошибок).
Не работает
Работаю в WebStorm, сегодня ОС на 8.1 Windows сменила.
Через работает.
В чем причина может быть?
Оценить 2 комментария
Давид Габриелян: А это как раз не важно. Браузеру все равно, а Google PageSpeed наоборот рекомендует лишний css убирать из заголовка. Да, не валидно, зато быстрее работает.
Попробуй так link rel=»stylesheet» type=»text/css» href=»style.css»
Помог ваш совет.
Просто скопипастил ваш вариант и заработало,хотя у меня по сути все было так же написано ,только порядок был другой.
Почему так ?
код правильный. скопируй свой код, закинь в обычный Word и поставь какой-то красивый шрифт для английского языка. возможно ты просто какую-то букву случайно записал кириллицей, а не латиницей, и поэтому отказывается работать
У меня похожая проблема. Я пользуюсь яндекс браузером и в итоге пришел к выводу, что все дело в браузере, он как бы сохраняет одну версию файла css и потом чисто только ее использует, но если зайти через инкогнито , то в этом случае ничего не сохраняется и все отображается
Открывается ли CSS-файл по прямому URL в browser-е?
То есть вы открываете свой HTML по пути типа «file://всякая хрень/index.html», а если заменить «index.html» на «style.css», что будет?
В таких случаях ошибка очевидна, просто надо быть внимательней, Вполне может быть, что в файле css ничего нет, забыли сохранить.
Столкнулся с такой же проблемой. Решение оказалось проще ,чем я думал.Просто поменял последовательность и все заработало.
Та же проблема. Все указано корректно, но в Opera он обновлял введения в CSS спустя какое-то время, а в Google Chrome — сразу. Как вариант — измените браузер.
Изначально проблема моя в том, что я сайт делал на локальном сервере Open Server, а файлы были .php, с расширением html всё работало, но тогда php не реализовать
Все траблы из-за браузеров — сбрасывайте настройки браузеров, или стирайте браузеры и вновь устанавливайте.