Почему background image не работает
Перейти к содержимому

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

  • автор:

Не работает свойство background в CSS

Author24 — интернет-сервис помощи студентам

Мучаюсь уже несколько часов,пробовал прописывать это свойство отдельно т.е. через background-image,background-repeat и т.п.
Правильность пути так же проверял
Пробовал так же под отдельный класс это прописывать
В чём подвох, форумчане?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Перестал работать css, никак не работает свойство background-image
Неожиданно перестал работать css,просто никак не работает свойство background-image(вместо.

Не работает свойство background
Почему фоновый рисунок не устанавливается в нижний правый угол для sidebar? Я же прописываю.

Почему не работает в адаптации под другие разрешения, свойство background: url
Почему обрезает половину, как только размер изменятся до 768 пикселей Я даже картинку уменьшил.

Не срабатывает свойство background-image в IE
Всем привет. При верстке не отображается картинка, заданная с помощью свойства background-image.

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351

background: url(img/p1.jpg) no-repeat 50% 50%; background-size: cover;

3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170

Лучший ответ

Сообщение было отмечено Никитка98 как решение

Решение

ЦитатаСообщение от Никитка98 Посмотреть сообщение

Правильность пути так же проверял

Сомневаюсь. И кстати, правильный путь включает в себя и точное указание имени директории/файла. Когда будете перепроверять, не забудьте про это.

83 / 74 / 22
Регистрация: 02.07.2013
Сообщений: 612

это весь ваш css код?
если что? то у меня код работает при верном указании адреса картинки.

возможные причины косяка
1 неверно указан адрес картинки
2 вы неправильно прилепили css файлик к html коду
3 ваш браузер отображает старый вариант страницы и не хочет ее обновлять.
возможно косяк совершенно неожиданный и непредвиденный для меня? например картинка корявая.

попробуйте творчески подойти к поиску ошибки, например попробуйте вместо фона-картинки сделать однотонный фон.
если вы неверно указали урл, то фон появиться,если фон не появиться, то вообще ваш css фаил не переварился.
кстати вы в какой среде верстаете?

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Свойство background-color вынести за рамки блока
Есть страница, что называется в "рамке". Есть необходимость растянуть background-color некоторых.

CSS background
Здравствуйте у меня такой вопрос, сделал всё по этой схеме. html, body < .

Background CSS
наверно, проблема пустячковая, но для меня пока неразрешимая. 3й день разбираюсь в HTML и CSS по.

background из внешнего .css
Помогите устранить недопонимание, чтобы впредь не нудить: подключаю к хтмл файлу внешний цсс — всё.

Или воспользуйтесь поиском по форуму:

Background-image не работает

Спасибо! Теперь работает. Вот почему в index.html работает без перехода на один уровень вверх ( ../ ), не пойму.

22 фев 2014 в 16:38

@Anton121212, потому что index.html находится на одном уровне с папкой img. И поэтому в index.html путь будет выглядеть прямым img/a.png

22 фев 2014 в 16:49
Спасибо! Я все понял!
22 фев 2014 в 16:54
Но не стоит забывать,что находясь на сервере точки не нужны и перед img нужно ставит «/»
28 фев 2016 в 12:30

Между тегами у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:

    New Page   

Как видите вы не дописали type=»text/css» в теге link .

Отслеживать
ответ дан 22 фев 2014 в 16:33
1,024 9 9 серебряных знаков 25 25 бронзовых знаков
В HTML5 считается корректно. В HTML4, разумеется нет.
22 фев 2014 в 16:39
Да и я не заметил, что у ТС css находится в другой папке. Тоже моя ошибка. 🙂
22 фев 2014 в 17:01

Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются

Отслеживать
ответ дан 12 мая 2020 в 17:55
Андрей Иванчин Андрей Иванчин
11 1 1 бронзовый знак

 body < background-image: url(../img/a.png); >

Отслеживать
ответ дан 22 фев 2014 в 16:28
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

Спасибо! Теперь работает. Вот почему в index.html работает без перехода на один уровень вверх ( ../ ), не пойму.

22 фев 2014 в 16:38

пол суток пробовал

background-image: url(../img/a.png); background-image: url("../img/a.png"); 

,а оказывается надо вот так

background-image: url('../img/a.png'); 

Отслеживать
68k 221 221 золотой знак 79 79 серебряных знаков 222 222 бронзовых знака
ответ дан 26 фев 2016 в 14:35
Andrey Passar Andrey Passar

Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.

Отслеживать
ответ дан 18 окт 2017 в 17:38

Судя по имени стиля вам нужен фон страницы. Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png

body < margin: 0; padding: 0; background: url("img/a.png") repeat scroll left top #FFFFFF; overflow-y: scroll; >

Отслеживать
ответ дан 22 фев 2014 в 16:29
380 1 1 золотой знак 4 4 серебряных знака 19 19 бронзовых знаков
Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png
22 фев 2014 в 16:32

Может помочь указания размеров картинки фона.

.image < background-image: url(img/a.png); width: 50px; /* ширина */ height: 50px; /* высота */ >

Отслеживать
ответ дан 27 мая 2016 в 16:26

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

  • html
  • css
    Важное на Мете
Связанные
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.12.4649

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

Проблема довольно банальна — ссылка на картинку блока из CSS файла блока не работает. Единственный работающий вариант это:

. background-image: url(../../common.blocks/header/images/bg-header.png) . 

Фактически это абсолютный путь к блоку, в который так-же входит и путь к папке блоков common.blocks , что на мой взгляд совершенно неверно. Т.е. если я допустим захочу вынести потом этот компонент в допустим папку blog.blocks то получается надо будет бегать и пути менять. Или переименую я блок — та-же история.

Вот такой вариант:

. background-image: url(images/bg-header.png) . 

Borschik (через enb — project-stub) чё-то как-то не помог — такой путь он просто проигнорировал. Пытался крутить конфиг .borschik но без особого успеха (но тут я сильно глубоко не рыл).

Итого вопрос — как всё-таки идеологически верно указывать пути к картинкам блока в CSS-файлах блока?

Комментарии: 3
7 years ago

@webhive Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.

Но у меня такая же нога, и не болит:

  1. Беру project-stub .
  2. Создаю папку common.blocks/b1/images
  3. Кладу туда картинку common.blocks/b1/images/b1.jpg
  4. Создаю файл common.blocks/b1/b1.css
  5. Пишу в него

Так что единственный вариант, который могу предложить — опубликуй свой проект на github, попробую разобраться.

7 years ago

Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался. Но у меня такая же нога, и не болит:

Вот чорт! Дико извиняюсь тогда за беспокойство — видимо сам где-то накосячил. Буду рыть дальше.

7 years ago

Короче разобрался в чём тут дело. После прочтения форума по этой теме (пути к картинкам) создалось ощущение, что за разворачивание пути до картинок отвечает borschik . В результате прикрутил его но нифига не помогло. Чортов борщ игнорировал пути и ничего не переписывал.

После ответа от @tadatuta попробовал всё сделать на чистом project-stub -е — всё получилось. Мистика! Попробовал вырезать борщ из project-stub . Ничего не поменялось — всё продолжило работать. Вот это уже интереснее. Ну думаю без вариантов — вся эта магия зашита в stylus . Заменил enb-stylus на enb-css в project-stub — всё равно работает. Да как блин так-то. 🙁

В итоге полез ковырять исходники enb-stylus и enb-css . Внутри обоих обнаружил postcss с плугином postcss-url . Вот блин и вся магия.

В моём тестовом проекте (который не работал) как раз использовался postcss . Добавил туда

plugins : [ . require('postcss-url')(< url: 'rebase' >), . ] 

и всё заработало.

В общем всё больше прихожу к выводу, что postcss заруливает все остальные технологии. Один хрен без него остальные плугины не работают, поэтому не вижу смысла ни в enb-css ни в enb-stylus — оба заменяются одним postcss — ом, к которому кстати можно прикручивать дополнительные парсеры.

background-image

Свойство CSS background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip и background-origin .

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none .

Примечание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут background-color . Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.

Начальное значение none
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется нет
Обработка значения как указано, но с абсолютными значениями url (en-US)
Animation type discrete

Синтаксис

background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit; 

Значения

Это ключевое слово обозначает отсутствие изображений.

(en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US) .

Официальный синтаксис

background-image =
# (en-US)

=
| (en-US)
none

=
| (en-US)
(en-US)

=
| (en-US)

=
url( (en-US) * (en-US) ) | (en-US)

=
src( (en-US) * (en-US) )

Примеры

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

HTML содержимое
div> p class="catsandstars">This paragraph is full of catsbr />and stars.p> p>This paragraph is not.p> p class="catsandstars">Here are more cats for you.br />Look at them!p> p>And no more.p> div> 
CSS содержимое
pre, p  font-size: 1.5em; color: #fe7f88; background-color: transparent; > div  background-image: url("mdn_logo_only_color.png"); > p  background-image: none; > .catsandstars  background-image: url("startransparent.gif"), url("catfront.png"); background-color: transparent; > 

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • CSS спрайты изображений (en-US)
  • Статьи, связанные с изображениями:: (en-US), linear-gradient() (en-US), radial-gradient() (en-US), repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US), element() (en-US).

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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