← Все вопросы
Как задать картинку фоном для блока в CSS?
13
Хочу поставить картинку фоном на секцию (на всю ширину, чтобы красиво растягивалась и не повторялась). Какие свойства использовать?
3 ответа
25
✓ Принятый ответ — помог автору
Через свойство background (или набор background-*):
.hero {
background-image: url('images/bg.jpg');
background-size: cover; /* заполнить весь блок без искажений */
background-position: center;/* центрировать картинку */
background-repeat: no-repeat;
min-height: 400px; /* блоку нужна высота, иначе фона не видно */
}
Ключевое:
background-size: cover— картинка покрывает весь блок, лишнее обрезается (для «растянуть на всю ширину» это то, что нужно).contain— наоборот, влезает целиком.- блоку обязательно нужна высота (
min-height/контент внутри), иначе фон не на чем показать. - путь в
url()— относительно CSS-файла, не HTML.
Лев Смирнов про путь относительно css-файла — вот почему у меня битая картинка была, спасибо 🙏 · 12 месяцев назад
11
background: url('bg.jpg') center/cover no-repeat; — короткая запись всего сразу. Не забудь блоку высоту.
4
background-image: url(...).
Ваш ответ
Войдите, чтобы ответить на вопрос.
