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');
Отслеживать
68.1k 223 223 золотых знака 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.3.8.5973
Почему не отображается фон прописанный в css?
Проверьте путь до картинки. У вас действительно в каталоге css есть каталог img, а в нем файл 3.jpg ?
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
background-color: #ff0; background-image: url(img/3.jpg); background-position: top;
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
У меня index и style лежали в разных папках, а путь я прописывал исходя от index.html. Достаточно просто положить в одно папку.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
Как указать картинку для закладок браузера?
- 1 подписчик
- 4 часа назад
- 17 просмотров
- HTML
- +1 ещё
Как написать стили для блоков, что прилипают к разным сторонам контейнера?
- 1 подписчик
- 10 часов назад
- 38 просмотров
Почему 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
8 years ago
@webhive Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.
Но у меня такая же нога, и не болит:
- Беру project-stub .
- Создаю папку common.blocks/b1/images
- Кладу туда картинку common.blocks/b1/images/b1.jpg
- Создаю файл common.blocks/b1/b1.css
- Пишу в него
Так что единственный вариант, который могу предложить — опубликуй свой проект на github, попробую разобраться.
8 years ago
Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался. Но у меня такая же нога, и не болит:
Вот чорт! Дико извиняюсь тогда за беспокойство — видимо сам где-то накосячил. Буду рыть дальше.
8 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 — ом, к которому кстати можно прикручивать дополнительные парсеры.
Как добавить фон на страницу. CSS background-image
background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.
Синтаксис
selector
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Значения
- url(‘путь_к_изображению’) — указывает путь к изображению. Вы можете указать относительный путь к изображению на вашем сервере или абсолютный URL для изображения в интернете.
- none — значение по умолчанию, где нет фона. Если не хотите использовать изображение в качестве фона, вы можете установить background-image: none; .
- linear-gradient() , radial-gradient() , repeating-linear-gradient() , repeating-radial-gradient() — создают градиент фона без использования изображений. Можно определить цветовую палитру и ориентацию градиента.
Повторное изображение
background-repeat: repeat; — значение по умолчанию, изображение повторяется по горизонтали и вертикали. Изображение будет заполнять фон элемента, повторяясь при необходимости.
background-repeat: repeat-x; — повторяется только по горизонтали.
background-repeat: repeat-y; — повторяется только по вертикали.
background-repeat: no-repeat; — отображается только один раз без повторения.
Размер изображения
background-size: auto; — отображается в своём естественном размере.
background-size: cover; — масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его.
background-size: contain; — масштабируется так, чтобы полностью поместиться в фон элемента без искажений. Белые полосы могут появиться по краям фона, если пропорции изображения и фона не совпадают.
Наследование
Свойство background-image не наследуется дочерними элементами. Каждый элемент должен самостоятельно задавать фоновое изображение.
Примеры использования
Добавление изображения на фон определённого элемента:
Здесь паучок
.container < width: 600px; height: 300px; background-image: url('01.jpg'); background-size: cover; /* размер одного повторяющегося изображения */ >h1
Добавление повторяющегося изображения на фон элемента
Здесь паучок
.container < width: 600px; height: 300px; background-image: url('01.jpg'); background-repeat: repeat; >h1
Добавление градиента на фон
Здесь нет паучка
.container < width: 600px; height: 300px; background-image: linear-gradient(to right, #E2BCBB, #E4514A); >h1
Нюансы использования
- Фоновые картинки не будут автоматически масштабироваться под размеры родительского элемента. Если размеры картинки и родительского элемента не совпадают, то картинка обрежется или начнёт повторяться.
- Если задать цвет фона и background-image для одного элемента, то картинка будет отображаться поверх цвета фона.
⭐ Поддержка браузерами свойства background-image
Материалы по теме
- Как размыть картинку
- Обзор цветовых форматов в CSS
- Как передвинуть элемент на странице
- Как сделать фон на странице
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Игры с бесконечностью, или зачем нам infinity в CSS
Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/
В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.
Ну, мне так кажется.
Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height
line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.
- line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
- line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
- line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
- 4 марта 2024
Свойство text-align
Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.
Сегодня вам бесплатно доступны тренажёры по HTML и CSS.
Свойство text-align может принимать несколько значений, включая:
- left — выравнивает текст по левому краю контейнера.
- right — выравнивает текст по правому краю контейнера.
- center — центрирует текст внутри контейнера.
- justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.
Пример использования свойства text-align :
Этот код выравнивает текст внутри всех параграфов ( ) по центру.
Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .
- 4 марта 2024
CSS-препроцессоры в 2024. Большой обзор
Препроцессоры позволяют разработчикам расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.
Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 29 февраля 2024
Как прятать
Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
- 28 февраля 2024
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Вот что получится в итоге:
- 7 сентября 2023