Двадцать третий урок. Работа с фоном

Для создания фона элемента используется универсальное свойство background. Универсальное оно из-за того, что по факту состоит из составных свойст (в скобках доступные значения):

То есть background используется как короткая запись, состоящая из этих свойств. Рассмотрим несколько примеров.

<div style="background: #f00 url(images/bg.jpg) top left no-repeat;"></div>

В url() указывается адрес изображения. Если оно недоступно, то фон будет залит заданным цветом (#f00). Слова top и left указывают на позиционирование картинки — сверху и слева. При указании no-repeat изображение не будет повторяться в случаях, когда размер блока больше, чем само изображение.

Начально положение можно указывать и в пикселах, и в процентах. Тут все зависит от задачи.

Данную короткую запись можно записать так:

background-color: #f00;
background-image: url(images/bg.jpg);
background-position: top left;
background-repeat: no-repeat;

Это тоже самое, только каждое свойство определяется отдельно. Если нужно просто залить фон каким-то цветом, то можно написать background: red;.

Довольно частая задача при верстке — разместить фоновую картинку поверх которой должен выводиться какой-нибудь текст.

<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; padding: 20px; color: white;">
текст
</div>
текст

Обратите внимание на center center — первое указывает на центрирование по горизонтали, второе по вертикали.

Если изменить свойство background-attachment на fixed, то получим интересный эффект при скроллировании страницы:

<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center fixed; height: 300px; padding: 20px; color: white;">
текст
</div>
текст

Правильное позиционирование фоновой картинки зависит от многих факторов, один из них — адаптивный дизайн, то есть нужно обеспечить корректное отображение фона при уменьшении размера экрана/блока. Если вы прямо на этой странице нажмете Ctrl+Shift+M и поиграете шириной экрана, то будет видно, что изображение не меняется, хотя продолжает оставаться отцентрированым.

При верстке лэндингов встречается задача размещения фонового изображения в шапке на всю ширину браузера. Тут нужно сразу учитывать, что размер изображения должен быть достаточно большой, чтобы охватить широкие экраны (например 1400px или даже 1900px). На малых экранах фон нужно как-то масштабировать и при необходимости обрезать.

Чтобы решит такую задачу используется свойство background-size (это самостоятельное свойство). Значения можно указывать в процентах, пикселах, em и т.п. Если указать auto, то размер будет подбираться автоматически из пропорций. Значение cover сохраняет пропорции так, чтобы уместиться в ширину или высоту блока. Значение contain масштабирует так, чтобы картинка целиком поместилась в блок.

Поскольку картинка делается с «запасом», то лучшим вариантом будет подобрать такое значение background-size, чтобы фон лучше всего смотрелся с данным изображением (при изменении ширины обратите внимание на появление синего фона блока, что недопустимо).

background-size: 100% auto
background-size: cover
background-size: contain

Другая задача, с которой вы можете столкнуться — использование прозрачности. Фоновые картинки могут быть довольно яркими и насыщенными, из-за чего текст просто теряется.

<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; padding: 20px; background-size: cover;">

	<div class="t-blue t200 bold">Какой-то текст</div>
	
</div>
Какой-то текст

Нужно уменьшить прозрачность блока с фоновой картинкой. В CSS есть специальное свойство opacity, которое как раз и задаёт ровень прозрачности. Но, к сожалению это вариант не подходит, поскольку прозрачность работает на весь блок, включая вложенные и к тому же уровень прозрачности определяется светлостью, а нам нужно наоборот — затемнение.

<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; padding: 20px; background-size: cover; opacity: 0.5;">

	<div class="t-blue t200 bold">Какой-то текст</div>

</div>
Какой-то текст

В таких случаях используют небольшую хитрость. Фон определяется как обычно, но внутри делается еще один блок с такими же 100% размерами, который окажется над фоновым. У него задаётся полупрозрачный фон с использованием функции rgba(). Чтобы выровнять внутренний блок точно по размеру контейнера есть разные способы, но самый простой — это flex-сетка с единственной ячейкой. У контейнера соответственно нужно убрать все внутренние отступы padding. Получается примерно такая схема:

<div class="flex" style="background: ...">
	<div style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);">
		
		текст
	
	</div>
</div>

Сам цвет rgba() работает как тонирующий оттенок. Если нужно получить просто прозрачность, то используют черный цвет. Прозрачность задается от 0 до 1. Обычно подбирается уже по ходу.

Какой-то текст
<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; background-size: cover;">
	
	<div style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 20px;">

		<div class="t-blue t200 bold">Какой-то текст</div>
			
	</div>
</div>

Или с классами UniCSS:

<div class="flex" style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; background-size: cover;">
	
	<div class="w100 h100 bg-op50 pad20">

		<div class="t-blue t200 bold">Какой-то текст</div>
			
	</div>
</div>

Существует похожая задача, где фон выводится как есть, а затемнение применяется только там, где выводится текст. Такая задача решается еще проще, поскольку прозачность нужно добавить либо ко всему блоку текста, либо к его inline-части (например SPAN).

<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; background-size: cover;">
	<div class="bg-op70 pad20 t-blue t200 bold">Какой-то текст</div>
</div>
Какой-то текст
<div style="background: blue url(http://maxsite.org/course1/assets/images/bg2.jpg) no-repeat center center; height: 300px; background-size: cover;">
	<div class="pad20 t-blue t200 bold"><span class="bg-op70 pad10">Какой-то текст</span></div>
</div>
Какой-то текст

Задания

Задания доступны только после авторизации.