background-image задаёт фоновую картинку через url(), linear-gradient() рисует плавный переход между цветами и подставляется в то же самое свойство. По умолчанию картинка повторяется плиткой в обе стороны, а градиент без указания направления идёт сверху вниз.
В этом уроке
Попробуй прямо сейчас: смени background-repeat у .img-box на no-repeat, а направление у .gradient-box на to bottom или на угол вроде 45deg.
Как сделать фон картинкой: background-image
background-image со значением url() подставляет картинку в качестве фона элемента - в отличие от background-color, здесь вместо сплошной заливки используется изображение. Картинку можно комбинировать с background-color: если картинка ещё не загрузилась или сама содержит прозрачные участки, будет виден заданный цвет фона позади неё.
background-image: url(fon.jpg); background-color: #eee; - цвет служит подложкой на случай, если картинка не загрузится или в ней есть прозрачность.
background-image: url(fon.jpg); без background-color - если картинка не загрузится, на её месте останется совсем пустой (прозрачный) фон.
Повтор и позиция фоновой картинки
По умолчанию фоновая картинка повторяется плиткой в обе стороны (background-repeat: repeat), пока не заполнит весь элемент - это удобно для мелких узоров, но маленькую картинку "для одного показа" нужно явно перевести в no-repeat. background-position задаёт, где именно расположена картинка: значения в процентах работают не как "отступ от края", а как точка совмещения - 50% 50% всегда ставит картинку точно по центру, независимо от размеров контейнера и самой картинки.
background-repeat: no-repeat; background-position: center; - картинка показывается один раз, ровно по центру блока.
Ожидание, что картинка растянется на весь блок сама по себе - без background-size она остаётся в своём естественном размере, просто повторяясь или прижимаясь к краю.
Как сделать градиент фона: linear-gradient
linear-gradient() рисует плавный переход между двумя и более цветами и, как и обычная картинка, подставляется в background-image (или в сокращённое background) - но не в background-color, потому что технически это тоже разновидность изображения. Направление задаётся ключевым словом (to right, to bottom left) или углом в градусах; если направление не указано вовсе, градиент по умолчанию идёт сверху вниз.
background-image: linear-gradient(to right, gold, tomato); - градиент слева направо, от золотого к томатному.
background-color: linear-gradient(to right, gold, tomato); - не сработает вообще, значение просто игнорируется, потому что background-color принимает только сплошной цвет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не задают background-repeat, ожидая, что маленькая картинка покажется один раз | Картинка по умолчанию повторяется плиткой в обе стороны | Указать background-repeat: no-repeat, если нужен один показ |
| При нескольких фоновых картинках через запятую ждут, что сверху окажется ПОСЛЕДНЯЯ (как в стопке слоёв) | На самом деле сверху всегда оказывается ПЕРВАЯ картинка в списке | Менять порядок картинок в списке, если они перекрываются не так, как задумано |
| Пытаются задать градиент через background-color | Значение просто игнорируется - виден прежний фон или его отсутствие, без ошибки в консоли | Указывать градиент только в background-image или в сокращённом background |
| Не указывают направление в linear-gradient() и удивляются результату | По умолчанию градиент идёт сверху вниз (to bottom) | Указать направление явно: ключевым словом (to right) или углом (45deg) |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Показать картинку один раз | background-repeat: no-repeat; |
| Заполнить блок картинкой с обрезкой краёв | background-size: cover; |
| Вписать картинку целиком без обрезки | background-size: contain; |
| Расположить картинку по центру | background-position: center; |
| Градиент слева направо | background-image: linear-gradient(to right, ЦВЕТ1, ЦВЕТ2); |
| Градиент под углом | background-image: linear-gradient(45deg, ЦВЕТ1, ЦВЕТ2); |
Коротко: отвечаем на вопросы
Как растянуть фоновую картинку, чтобы она заполнила весь блок?
background-size: cover масштабирует картинку так, чтобы она полностью заполнила блок - но если пропорции картинки и блока не совпадают, часть картинки обрежется по краям. Если обрезка нежелательна, background-size: contain впишет картинку целиком без обрезки, но тогда по краям блока могут остаться пустые полосы.
Можно ли наложить градиент поверх фоновой картинки, чтобы затемнить её для читаемости текста?
Да - background-image принимает список из нескольких слоёв через запятую, а первый в списке рисуется сверху. Значит достаточно указать полупрозрачный градиент первым, а картинку вторым: background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(фото.jpg) - и текст поверх станет заметно читаемее.
