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

Question

[Kerrik Солнце]

html:
<div class="background"></div>

css:

.background {
	min-width: 300px;
	max-height: 300px;
	background: #fff url(.../Фото/image.png) center no-repeat;
}

Возможно дело в пути изображения. Вот путь файла image.png:

Comments

[Lynn «Кофеман»]

Так div пустой и нулевой высоты.

Answer 1

[Stalker_RED]

работает

.../Фото/image.png

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

Comments

[corrector25]

Всё-таки дело в пути. А какой в моем случае будет путь от корня?

[Stalker_RED]

corrector25, вот он, корень


Могу писать <img src="/img/dummy.jpg"> и сервер будет подставлять картинку, которая лежит по адресу C:\work\test\public\img\dummy.jpg

Или сделаю ссылку <a href="/">пыщь</a> и эта ссылка приведет на главную страницу.

Answer 2

[xdevelx]

Возможно дело в пути изображения.

background: #fff url(.../Фото/image.png) center no-repeat;
Зачем три точки? Для выхода на уровень выше нужны 2 точки ..

Ну и вchrome dev tools во вкладке network (сеть) смотрите урл изображения, который сформировал браузер.

Comments

[corrector25]

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

[xdevelx]

corrector25, Можете попробовать поставить и побольше точек, вдруг изображение загрузится сразу оптимизированное?

[Владимир]

corrector25, Комп это не волшебный ящик, две точки это такое же путь как и Фото, еще есть одна точка. Одна точка указывает на текушую папку, две точки на папку на уровень выше.
Попробуйте в консоли написать команду cd ../ и посмотрите что произойдет

Answer 3

[Владимир]

Три точки, кирилица, большие буквы. Если три точки это просто ошибка, таких путей не бывает, то второе и третье это настоятельная рекомендация чтобы не добавлять себе геморою.
Используйте IDE и автодополнение и в идеале абсолютные пути (начинаются с /)

Answer 4

[ThunderCat]

1) За нелатинские пути в приличном обществе могут и по мордасам...
2) урл должен быть в кавычках
3) Путь .../ это вообще куда? Либо / - это от корня сайта, либо ../ - это выше текущего пути на одну папку, либо вообще без ведущего слеша или ./ - это в текущей папке.

плюс если внутри дива ничего нет, то его высота / ширина будет нулевой, если не задана явно. А тут задана только ширина.

Comments

[corrector25]

О, спасибо! Оказывается, тут тоже все не так просто))

[xdevelx]

2) урл должен быть в кавычках

Не должен
Есть спецификация, по которой одинарные и двойные кавычки опциональны https://www.w3.org/TR/CSS2/syndata.html#value-def-uri
Да и mdn так не считает https://developer.mozilla.org/ru/docs/Web/CSS/back...

[ThunderCat]

corrector25, плюс если внутри дива ничего нет, то его высота / ширина будет нулевой, если не задана явно. А тут задана только ширина.

[ThunderCat]

xdevelx, вы путаете с бэкграунд-имаж, что не одно и то же.
https://developer.mozilla.org/ru/docs/Web/CSS/back...

[corrector25]

ThunderCat, тут же задана высота
max-height: 300px;

[xdevelx]

ThunderCat, Что? background - это сокращенное свойство, которое включает в себя и background-image. url() то явно задает значение именно для background-image.

[Антон Литвиненко]

corrector25, не задана. тут задана максимальная высота, при пустом блоке высота будет 0

[ThunderCat]

xdevelx,

background - это сокращенное свойство, которое включает в себя и background-image.

ага, а теперь пройдите по ссылке и посмотрите что же рекомендует в данном случае мдн. Вообще - да, кавычки опциональны, но в базовом стандарте они были, и в доках везде по прежнему они есть. Лучше поставить, так и семантически отделяется строковое значение, и с базовым определением совпадает.

[ThunderCat]

corrector25,

тут же задана высота

максимальная высота, а минимальная или базовая не задана, по умолчанию она нулевая.

[xdevelx]

ThunderCat, Если я вас правильно понял, то в background-image для url() кавычки не нужны, а для background в url() кавычки обязательны?
Все таки прочтите спецификацию https://www.w3.org/TR/CSS2/syndata.html#value-def-uri и поймите, что кавычки опциональны. Если в URI не окажется пробела (ну мало ли кто как папки называет), то все браузеры одинаково воспримут путь и с кавычками, и без.
Поэтому ваше утверждение "урл должен быть в кавычках" не должно быть категоричным.

[ThunderCat]

xdevelx, Я же написал, что они опциональны, но в базовом стандарте были обязательны, и все доки чуть старше пары лет их содержат, кроме того они семантически отделяют строковый параметр.

[xdevelx]

ThunderCat,

но в базовом стандарте были обязательны

Ну да. 1996 год - https://www.w3.org/TR/CSS1/#background-image - посмотрите на примеры, никогда они не были обязательны.
В третий раз вас процитирую

2) урл должен быть в кавычках

- не должен и в "базовом стандарте" не были кавычки обязательными и авторы w3c сами еще в 1996 году писали примеры без кавычек.

[ThunderCat]

xdevelx,

Поэтому ваше утверждение "урл должен быть в кавычках" не должно быть категоричным.

Тут да, высказывание звучит как утверждение, хотя на самом деле рекомендация. И кстати в формате представленным ТС вполне может не работать без кавычек, так как русские символы, пробелы и разный регистр в урл без кавычек вообще не понятно как будет работать в такой солянке.

[ThunderCat]

xdevelx,

не должен и в "базовом стандарте"

в3ц - не стандарт, а рекомендация, а строковые параметры отделяются кавычками по стандарту (большинства) языков (и языков разметки в том числе). Другое дело что возникает чехарда с кавычками, когда сам параметр уже в кавычках (по сути уже строка), как в случае инлайнового стиля, и приходится либо не писать кавычки, либо использовать одинарные и двойные для разделения. В том числе для предотвращения разночтений между заковыченным текстом и продолжением строки. А в случае локальных виндовых адресов или нестандартных путей без этого вообще работать не будет. То есть все это расписывать, упоминать что стили в свое время не имели обязательного отделения кавычками в инлайновом описании в половине браузеров и тд пожалуй длинновато. Короче написать "нужны кавычки".