Как сделать картинку фоном в css: Как сделать картинку фоном в HTML и CSS. 3 простых способа

Содержание

Как сделать фон картинкой

Вы здесь: Главная — CSS — CSS Основы — Как сделать фон картинкой

Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:

body {

  background: url("images/bg. jpg") repeat-x #dedede;

}

Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон. Возможно, Вы сейчас спросите: «А что будет, если высота будет больше 800 пикселей?«. Вот для этого мы и задали «#dedede» — тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:

body {

  background: url("images/bg.jpg") repeat-y center #dedede;

}

Иногда, центрирование не требуется.

И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:

body {
  background: url("images/bg.jpg") no-repeat #dedede;
}

Цвет вне изображения надо задавать таким, чтобы был плавный переход от границ картинки к этому цвету.

Я показал Вам, как сделать фон картинкой. Безусловно, есть различные особенные случаи, где нужно уже думать самостоятельно, а самые основные и популярные варианты, Вы теперь уже знаете.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Создано 16.12.2011 13:32:22

Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Учебник CSS 3. Статья «Работа с фоном элемента в CSS»

В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать

эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.

Для того чтобы Вы смогли создавать по настоящему красочные, яркие и уникальные сайты, вам необходимо познакомиться и изучить методы работы с задним фоном и с таким свойством как background-image, которое позволяет задать одно или несколько фоновых изображений для элемента.

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
PNG (англ. Portable network graphics — растровый формат хранения графической информации).

Чтобы задать изображение в качестве заднего фона необходимо использовать свойство background-image и указать путь к файлу изображения, который может быть как относительный, так и абсолютный:

селектор {
background-image: url(images/main_bg.png);
}

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

Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента <body>:

<!DOCTYPE html>
<html>
<head>
	<title>Пример установки изображения в качестве фона</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-color: white; /* задаем задний фон для элемента */
}
</style>
</head>
	<body>
	</body>
</html>

По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент <body> полностью заполнился фоновым изображением.

Желательно всегда устанавливать цвет заднего фона в качестве альтернативы изображению, в этом случае, если изображение по каким-то причинам не будет загружено, то будет использован заданный Вами цвет.

Запомните этот момент, мы не будем к нему возвращаться в статьях этого учебника.

Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

Управление повтором фонового изображения

Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.

Это свойство имеет следующие доступные значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x	Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y	Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat	Фоновое изображение не будет повторяться.

Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
 . noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h2>Значение repeat для body (по умолчанию)</h2>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:

Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg. png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
. centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich. jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.

И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.

Возможные значения этого свойства:

Значение	Описание
padding-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-box	Фоновое изображение позиционируется от верхнего левого угла содержимого элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-origin</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 10em; /* устанавливаем высоту элемента */
border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
color: yellow; /* устанавливаем цвет шрифта желтый */
}
.test {background-origin: padding-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
. test2 {background-origin: border-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */
.test3 {background-origin: content-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */
</style>
</head>
<body>
	<div class = "test">padding-box</div>
	<div class = "test2">border-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

Первый блок (padding-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
Второй блок (border-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
Третий блок (content-box) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

Результат нашего примера:

Рис. 119 Пример использования свойства background-origin.

И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip?

Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

В таблице представлены возможные значения этого свойства:

Значение	Описание
border-box	Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-box	Фон элемента занимает все пространство (не включая границ элемента).
content-box	Фон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-clip</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 9em; /* устанавливаем высоту элемента */
background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
}
. test {background-clip: border-box;}  /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2 {background-clip: padding-box;}  /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3 {background-clip: content-box;}  /* устанавливаем, что фон элемента занимает все содержимое элемента */
</style>
</head>
<body>
	<div class = "test">border-box</div>
	<div class = "test2">padding-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

Первый блок (padding-box) — фон элемента занимает все пространство. Это значение по умолчанию.
Второй блок (border-box) — фон элемента занимает все пространство (не включая границы элемента).
Третий блок (content-box) — фон элемента занимает все содержимое элемента.

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

Значение	Описание
auto	Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length	Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%	Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
cover	Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain	Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример масштабирования фоновых изображений</title>
<style> 
div {
width: 8em; /* устанавливаем ширину элемента */
height: 8em; /* устанавливаем высоту элемента */
border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */
background-image: url(manul. jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем внешний отступ с правой стороны */	
margin-bottom: 15px; /* устанавливаем внешний отступ с нижней стороны */	
color: yellow; /* устанавливаем цвет элемента */
}
.test {background-size: auto;} /* фоновое изображение содержит свою ширину и высоту */
.test2 {background-size: 100px 100px;} /* устанавливаем ширину и высоту фонового изображения в пикселях */
.test3 {background-size: 70% 70%;} /* устанавливаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size: cover;} /* масштабируем фоновое изображение под размеры элемента */
.test5 {background-size: contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

Первый блок (auto) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
Второй блок (100px 100px) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
Третий блок (70% 70%) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
Четвертый блок (cover) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
Пятый блок (contain) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

Давайте рассмотрим пример использования универсального свойства background:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
html, body {
height: 100%; /* устанавливаем высоту элементов */
width: 100%; /* устанавливаем ширину элементов */
margin: 0; /* убираем внешние отступы элемента */
padding: 0; /* убираем внутренние отступы элемента */
}
header {
width: 100%; /* устанавливаем ширину элемента */
min-height: 34%; /* устанавливаем минимальную высоту элемента */
background: white url('cat_g.jpg') bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */
}
.primer2 {
width: 100%; /* устанавливаем ширину элемента */
min-height: 66%; /* устанавливаем минимальную высоту элемента */
background: url('lis.png') top/contain no-repeat, url('cat_g.jpg') bottom/cover no-repeat; 
/* Обратите внимание, что значения для различных изображений указываются через запятую */
/* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2  позиция/масштаб повтор */
}
</style>
</head>
	<body>
		<header></header>
		<div class = "primer2"></div>
	</body>
</html>

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо. Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):
Практическое задание № 28.
Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Фон и границы — Изучение веб-разработки

В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закругленных углов свойства фона и границ ответят на многие вопросы стилизации в CSS.

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

.box {
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
  url(big-star.png) center no-repeat, rebeccapurple;
}

Мы вернемся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.

Фоновый цвет

Свойство background-color определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).

В приведенном ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу <span>.

Поиграйте с ними, используя любое доступное значение <color>.

Фоновое изображение

Свойство background-image позволяет отображать изображение в качестве фона элемента. В приведенном ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом — маленькое изображение звезды.

Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.

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

Свойство background-repeat

Свойство background-repeat используется для управления повторениями фонового изображения. Доступные значения:

no-repeat — останавливает повторение фонового изображения во всех направлениях.
repeat-x — повторение фонового изображения по горизонтали.
repeat-y — повторение фонового изображения по вертикали.
repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

Попробуйте эти значения в примере ниже. Мы установили значение no-repeat, поэтому вы видите только одну звезду. Попробуйте разные значения — repeat-x и repeat-y — чтобы увидеть, какие эффекты они оказывают.

Изменение размеров фонового изображения

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

Вы также можете использовать ключевые слова:

cover — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

В приведенном ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.

Попробуйте следующее.

Измените значения длины, используемые для изменения размера фона.
Измените значение длины на background-size: cover или background-size: contain.
Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.

Позиционирование фонового изображения

Свойство background-position позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.

Примечание: По умолчанию значение background-position равно (0,0).

Обычно свойство background-position задают в ввиде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице background-position):

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

Допустимы значения длины и процентные:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}

И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определенных краёв блока — единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

Используйте приведенный ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.

Примечание: background-position — это сокращение для background-position-x и background-position-y, которые позволяют вам устанавливать различные значения положения по оси индивидуально.

Градиент в качестве фона

Градиент — при использовании для фона — действует так же, как изображение, и поэтому задаётся свойством background-image.

Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>. Поиграть с градиентами Вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.

Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.

Несколько фоновых изображений

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

Когда Вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.

Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства background- * также могут иметь значения, разделенные запятыми, как и background-image:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться — в приведенном выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться — image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

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

Закрепление фона

Другая опция, которую можно применить к фону, — это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства background-attachment, которое может принимать следующие значения:

scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
fixed: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями — взгляните на background-attachment.html (также смотри исходный код здесь).

Использование сокращенного свойства background

Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства background. Это сокращение позволяет вам одновременно устанавливать все различные свойства.

При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведенном ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.

При записи сокращенных значений фонового изображения необходимо соблюдать несколько правил, например:

background-color можно указывать только после последней запятой.
Значения background-size могут быть включены только сразу после background-position, разделенные символом ‘/’, например: center/80%.

Посетите страницу MDN свойства

, чтобы увидеть полное описание.

Доступность просмотра

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

Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.

Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращенное свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.

Мы можем установить границу для всех четырех сторон блока с помощью border:

.box {
  border: 1px solid black;
}

Или мы можем нацеливаться на один край блока, например:

.box {
  border-top: 1px solid black;
}

Индивидуальные свойства этих сокращений будут следующими:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

И более детально:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

Закруглённые углы

Закругление углов блока достигается с помощью свойства border-radius и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе — вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.

Например, чтобы сделать все четыре угла блока радиусом 10px:

.box {
  border-radius: 10px;
}

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

.box {
  border-top-right-radius: 1em 10%;
}

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

Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведенный ниже пример в качестве отправной точки:

Задайте рамку равную 5px black solid, с закругленными углами 10px.
Добавить фоновое изображение (используйте URL balloons.jpg) и установите размер таким образом, чтобы он покрыл весь блок.
Задайте для <h3> полупрозрачный черный цвет фона и сделайте текст белым.

Примечание: Вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

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

В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

масштабируем фон — учебник CSS

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:
```

background-size: auto auto;
```
…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:
```

background-size: 250px auto;
```
…то высота фоновой картинки будет вычисляться автоматически.
contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.
cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Фоновые изображения в css

Продолжая фоновую тему рассмотрим, как делается фоновое изображение в CSS.

Раз речь зашла об изображениях, значит нам прямая дорога в Яндекс. Картинки.

Набираем в поисковике запрос «Яндекс. Картинки», а затем в поисковике сервиса — «Фоновые изображения».

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

Так что выбираем то, что Вам нужно, и загружаем выбранные картинки в папку images, в директории сайта.

Если сайта у Вас ещё нет, то как создать директорию сайта читайте в статьях Создание директории сайта и Каркас страницы. Создаём файл.

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

Для внедрения изображения, применяется свойство background-image, в значении которого указывается путь к картинке. Для фона экрана, это свойство задаётся в селекторе body

body{ background-image: url(images/i.jpg); }

Для фона блока это свойство задаётся в селекторе выбранного блока.

div{ background-image: url(images/i1.jpg); }

Создаём html документ (страницу)

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> body{ background-image: url(images/i.jpg); } div{ background-image: url(images/i1.jpg); border: 2px solid #e01137; width: 500px; height: 250px; margin: auto; } </style> </head> <body> <div></div> </body> </html>

Посмотрим результат:

Вот так это смотрится. Переходим на следующую страницу знакомиться с таким свойством фоновых изображений, как множественность, или повтор.

Перемена

— Уважаемые одесситы и гости нашего города! Мы напоминаем, что, если вы заплываете на 15 миль от берега, вам нужен загранпаспорт, потому что это уже территориальные воды Турции.

Как делается фоновый цвет средствами CSS < < < В раздел > > > Размноженное изображение

Способы создания прозрачных фонов у блоков в CSS

Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

Свойство opacity.
Использование PNG -картинки
Формат системы RGBA
Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> 
    </head>
      <body>
  <div>
   Тут будет много Вашего текста
  </div>
    </body>
</html>

CSS:

body {
    background: url(./vaden-pro-logo.png); /* Фон для тела страницы  */
   }
   . prozrachen {
    padding: 10px; /*Отступы для текста*/
    background: darkturquoise; /* Задаем цвет фона */
    margin: 0 auto; /* Центрируем блок */
    width: 50%; /* Задаем ширину блока */
 
    opacity: 0.7; /* Задаем прозрачность */
    font: 48px/64px Times New Roman;
    text-align: justify;
   }

В результате мы получили полупрозрачный блок:

Важно!!!

Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:
```
 
filter: alpha(Opacity=70);
 
```
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
- с абсолютным позиционированием (position: absolute)
- с фиксированным линейным размером (height или width).
Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

Используем ее в качестве бэкграунда:

body {
     background: url(./vaden-pro-logo.png); 
     }
    .prozrachen {
     padding: 10px; 
     background: url(./transparent.png);
     margin: 0 auto; 
     width: 50%; 
     font: 48px/64px Times New Roman;
    color: white;</li>
    text-align: justify;
   }

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Важно!!!

В отличии от свойства opacity прозрачность задается только для фона
Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a);

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body {
    background: url(./vaden-pro-logo.png); /* Фоновый рисунок  */
   }
   .prozrachen {
    padding: 10px; 
    background: rgba(0, 206, 209, 0.7); 
    margin: 0 auto; 
    width: 50%; 
    font: 48px/64px Times New Roman;
    color: white;
    text-align: justify;
   }

Важно!!!

В отличии от свойства opacity прозрачность задается только фону
В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

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

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность – вещь важная.

Успехов!!!

Оценок: 9 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Изменение размера фоновых изображений с помощью background-size — CSS: Cascading Style Sheets

Свойство CSS background-size позволяет изменять размер фонового изображения элемента, переопределяя поведение по умолчанию мозаичного размещения изображения до его полного размера, указав ширину и / или высоту изображения. Таким образом, вы можете масштабировать изображение вверх или вниз по желанию.

Давайте рассмотрим большое изображение, изображение логотипа Firefox размером 2982×2808. Мы хотим (по какой-то причине, вероятно, связанной с ужасающе плохим дизайном сайта) разместить четыре копии этого изображения в элементе размером 300×300 пикселей.Для этого мы можем использовать фиксированное значение background-size , равное 150 пикселям.

HTML

CSS

  .tiledBackground {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: 150 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
}

Результат

Вы также можете указать размеры изображения по горизонтали и вертикали, например:

  размер фона: 300 пикселей 150 пикселей;

Результат выглядит так:

На другом конце спектра вы можете увеличить изображение на заднем плане.Здесь мы масштабируем значок 32×32 пикселей до 300×300 пикселей:

  .square2 {
  фоновое изображение: URL (favicon.png);
  размер фона: 300 пикселей;
  ширина: 300 пикселей;
  высота: 300 пикселей;
  граница: сплошная 2px;
  тень текста: белый 0px 0px 2px;
  размер шрифта: 16 пикселей;
}

Как видите, CSS фактически идентичен, сохраните имя файла изображения.

Помимо значений , свойство CSS background-size предлагает два специальных значения размера: содержит и cover .Давайте посмотрим на них.

содержат

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

HTML

  
   Попробуйте изменить размер этого элемента!

CSS

 .bgSizeContain {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: содержать;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}

Результат

cover

Значение cover указывает, что размер фонового изображения должен быть как можно меньше, при этом оба размера должны быть больше или равны соответствующему размеру контейнера.Попробуйте изменить размер приведенного ниже примера, чтобы увидеть это в действии.

HTML

  
   Попробуйте изменить размер этого элемента!

CSS

  .bgSizeCover {
  background-image: url (https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  размер фона: обложка;
  ширина: 160 пикселей;
  высота: 160 пикселей;
  граница: сплошная 2px;
  цвет: розовый;
  изменить размер: оба;
  переполнение: прокрутка;
}

Результат

Фоны и границы — Изучите веб-разработку

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

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

  .box {
  фон: linear-gradient (105deg, rgba (255,255,255 ,.2) 39%, rgba (51,56,57,1) 96%) center center / 400px 200px без повтора,
  url (big-star.png) center no-repeat, rebeccapurple;
}

Мы вернемся к тому, как работает сокращение позже в руководстве, но сначала давайте посмотрим на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства фона.

Цвета фона

Свойство background-color определяет цвет фона для любого элемента в CSS. Свойство принимает любые действительные <цвет> . background-color простирается под полем содержимого и заполнения элемента.

В приведенном ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона в поле, заголовок и элемент .

Поиграйте с ними, используя любое доступное значение .

Фоновые изображения

Свойство background-image позволяет отображать изображение в качестве фона элемента.В приведенном ниже примере у нас есть два прямоугольника: в одном фоновое изображение больше, чем в поле, а в другом — маленькое изображение звезды.

Этот пример демонстрирует две вещи о фоновых изображениях. По умолчанию большое изображение не масштабируется, чтобы поместиться в рамку, поэтому мы видим только небольшой его угол, тогда как маленькое изображение размещается плиткой для заполнения рамки. В этом случае фактическое изображение представляет собой всего лишь одну звезду.

Если вы укажете цвет фона в дополнение к фоновому изображению, то изображение будет отображаться поверх цвета.Попробуйте добавить свойство background-color в приведенный выше пример, чтобы увидеть это в действии.

Контроль повторения фона

Свойство background-repeat используется для управления мозаичным поведением изображений. Доступные значения:

no-repeat — запретить повторение фона полностью.
repeat-x — повторять по горизонтали.
repeat-y — повторять по вертикали.
повтор — по умолчанию; повторить в обоих направлениях.

Попробуйте эти значения в примере ниже. Мы установили значение без повтора , поэтому вы увидите только одну звезду. Попробуйте разные значения — repeat-x и repeat-y — чтобы увидеть, каковы их эффекты.

Изменение размера фонового изображения

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

Вы также можете использовать ключевые слова:

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

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

Попробуйте следующее.

Измените единицы длины, используемые для изменения размера фона.
Удалите единицы длины и посмотрите, что произойдет, если вы используете background-size: cover или background-size: contain .
Если ваше изображение меньше размера окна, вы можете изменить значение background-repeat , чтобы повторить изображение.

Расположение фонового изображения

Свойство background-position позволяет выбрать положение, в котором фоновое изображение будет отображаться в поле, к которому оно применяется. При этом используется система координат, в которой верхний левый угол прямоугольника равен (0,0) , а прямоугольник расположен вдоль горизонтальной ( x ) и вертикальной ( y ) осей.

Примечание : значение по умолчанию background-position равно (0,0) .

Наиболее распространенные значения background-position принимают два отдельных значения — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как вверху и справа (посмотрите остальные на странице background-position ):

  .box {
  фоновое изображение: url (star.png);
  фон-повтор: без повторения;
  background-position: верхний центр;
}

И Длина, и проценты:

 .box {
  фоновое изображение: url (star.png);
  фон-повтор: без повторения;
  background-position: 20px 10%;
}

Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

  .box {
  фоновое изображение: url (star.png);
  фон-повтор: без повторения;
  background-position: верхние 20 пикселей;
}

Наконец, вы также можете использовать синтаксис с 4 значениями, чтобы указать расстояние от определенных краев поля — единица длины в этом случае является смещением от значения, которое ей предшествует.Итак, в CSS ниже мы располагаем фон на 20 пикселей сверху и на 10 пикселей справа:

  .box {
  фоновое изображение: url (star.png);
  фон-повтор: без повторения;
  background-position: верхние 20 пикселей справа 10 пикселей;
}

Используйте приведенный ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри рамки.

Градиентный фон

Градиент — при использовании для фона — действует так же, как изображение, и также устанавливается с помощью свойства background-image .

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

Попробуйте использовать разные градиенты в примере ниже. В двух полях, соответственно, у нас есть линейный градиент, растянутый на всю коробку, и радиальный градиент с заданным размером, который поэтому повторяется.

Несколько фоновых изображений

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

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

Примечание : Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства background- * также могут иметь значения, разделенные запятыми, так же, как background-image :

  фоновое изображение: url (image1.png), url (image2.png), url (image3.png), url (image4.png);
фон-повтор: нет-повтор, повтор-х, повторение;
background-position: 10px 20px, вверху справа;

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение image1 background-repeat будет равно no-repeat .Однако что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться — в приведенном выше примере есть четыре фоновых изображения, но только два значения background-position . Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться — image3 получит первое значение позиции, а image4 получит второе значение позиции.

Давай поиграем.В приведенном ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте переключить фоновое изображение в списке первым. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.

Вложение фона

Другой вариант, который у нас есть для фонов, — это указать, как они прокручиваются при прокрутке содержимого. Это контролируется с помощью свойства background-attachment , которое может принимать следующие значения:

scroll : заставляет фон элемента прокручиваться при прокрутке страницы.Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
fixed : заставляет фон элемента быть привязанным к области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Он всегда будет оставаться на одном и том же месте на экране.
local : это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4 +), потому что значение scroll довольно сбивает с толку и на самом деле не делает то, что вы хотите во многих случаи.Локальное значение фиксирует фон для элемента, для которого он установлен, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали демонстрацию, чтобы продемонстрировать различия между тремя значениями — взгляните на background-attachment.html (также см. Источник код здесь).

Использование сокращенного свойства фона

Как я уже упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства background .Это сокращение позволяет вам одновременно устанавливать все различные свойства.

При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведенном ниже примере у нас есть градиент с размером и положением, затем фон изображения с без повтора и положением, затем цвет.

Есть несколько правил, которые необходимо соблюдать при записи сокращенных значений фонового изображения, например:

background-color можно указывать только после последней запятой.
Значение background-size может быть включено только сразу после background-position , разделенное символом ‘/’, например: center / 80% .

Взгляните на страницу MDN для background , чтобы увидеть все соображения.

Закругленные углы

Закругление углов на прямоугольнике достигается за счет использования свойства border-radius и связанных длинных сторон, которые относятся к каждому углу поля. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе — вертикальный радиус.Во многих случаях вы передаете только одно значение, которое будет использоваться для обоих.

Например, чтобы сделать все четыре угла коробки радиуса 10 пикселей:

  .box {
  радиус границы: 10 пикселей;
}

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

  .box {
  граница-верх-правый-радиус: 1em 10%;
}

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

В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: фон и границы.

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

В следующем уроке мы узнаем, как режим письма вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?

Как применить преобразования CSS3 к фоновым изображениям

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

Эта статья была обновлена в 2020 году. Чтобы узнать больше о CSS, прочтите нашу книгу CSS Master, 2nd Edition.

Масштабирование, наклон и поворот любого элемента возможны с помощью свойства CSS3 transform . Он поддерживается всеми современными браузерами без префиксов поставщиков.

  #myelement {
  преобразовать: повернуть (30 градусов);
}

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

Нет предложения W3C CSS для преобразования фонового изображения . Это было бы невероятно полезно, поэтому, возможно, однажды он появится, но это не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Этого можно достичь с помощью:

процесс обработки изображений на стороне сервера
клиентский код обработки изображений Canvas или
API, предоставляемых некоторыми службами CDN, размещающими изображения.

Но все это требует дополнительных усилий, обработки и затрат.

К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу :: before или :: after , а не к родительскому контейнеру.Затем псевдоэлемент можно преобразовать независимо от содержимого.

Преобразование только фона

К элементу-контейнеру можно применить любые стили, но он должен быть установлен на position: relative , поскольку наш псевдоэлемент будет расположен внутри него. Вы также должны установить overflow: hidden , если вы не хотите, чтобы фон выливался за пределы контейнера.

  #myelement {
  положение: относительное;
  переполнение: скрыто;
}

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с преобразованным фоном. z-index установлен на -1 , чтобы он отображался под содержимым контейнера:

  #myelement :: before {
  содержание: "";
  позиция: абсолютная;
  ширина: 200%;
  высота: 200%;
  верх: -50%;
  осталось: -50%;
  z-индекс: -1;
  фон: url (background.png) 0 0 повтор;
  преобразовать: повернуть (30 градусов);
}

Обратите внимание, что вам может потребоваться настроить ширину, высоту и положение псевдоэлемента. Например, если вы используете повторяющееся изображение, повернутая область должна быть больше, чем ее контейнер, чтобы полностью покрыть фон.

Фиксация фона на преобразованном элементе

Все преобразования родительского контейнера применяются к псевдоэлементам. Следовательно, нам нужно отменить преобразование. Например, если контейнер повернут на 30 градусов, фон необходимо повернуть на -30 градусов, чтобы вернуться в исходное положение:

  #myelement {
  положение: относительное;
  переполнение: скрыто;
  преобразовать: повернуть (30 градусов);
}

#myelement :: before {
  содержание: "";
  позиция: абсолютная;
  ширина: 200%;
  высота: 200%;
  верх: -50%;
  осталось: -50%;
  z-индекс: -1;
  фон: url (background.png) 0 0 повтор;
  преобразовать: повернуть (-30 градусов);
}

Опять же, вам нужно отрегулировать размер и положение, чтобы фон должным образом покрыл родительский контейнер.

Вот соответствующие демонстрации в прямом эфире на CodePen:

Смотрите Pen
CSS3 Transforms on Background Images by SitePoint (@SitePoint)
на CodePen.

Эффекты работают во всех основных браузерах и в Internet Explorer до версии 9. В старых браузерах преобразования вряд ли будут отображаться, но фон все равно должен отображаться.

фоновых изображений от pica-ae на DeviantArt

Сегодняшний трюк с CSS будет касаться использования фоновых изображений в обложках журналов.

Существует три типа изображений, которые в основном используются в обложках журналов: большие фоновые изображения, плавно повторяющиеся узоры и изображения, похожие на значки / логотипы.

Изображения могут использоваться для всех элементов журнала: в верхнем, нижнем колонтитуле, за текстом, рядом с текстом и т. Д. Любой элемент журнала может содержать изображение.

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

Проблемы с использованием изображений:

Несмотря на большие размеры, изображения оказываются слишком маленькими для журнала
Изображение не повторяется плавно
Текст на изображении становится нечитаемым
Слишком большие изображения замедляют загрузку время страницы

.gr-box {
background: url (« h ttp: //…/pattern.png»);

}

Если вы добавите изображение именно так, оно будет автоматически повторяться во всех направлениях, начиная с верхнего левого угла элемента, в котором содержится фоновое изображение. (Хотя мне хорошо известно, что изображение, которое я выбрал для этих примеров, на самом деле довольно плохо)

Lorem ipsum dolor sit amet, Contetur Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Но у вас есть больше возможностей для управления изображениями.

Вы можете контролировать положение изображения, где оно расположено, повторяется ли оно, как оно повторяется и как оно себя ведет.

.gr-box {
background-color: # bde6d8;

background-image: url (« h ttp: //… / pattern.png «);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;

}

Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. elitr, sed diam

Вы также можете записать все это только на фоновый элемент.Какой способ вы выберете для написания, зависит от вас. Для новичков, когда все это записывается, код легче просматривать, а ошибки легче обнаруживать. Чем больше вы познакомитесь с CSS, тем больше вероятность, что вы запишете все в одну строку.

.gr-box {
background: # bde6d8 url (« h ttp: //…/pattern.png») center no-repeat scroll ;

}

Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Что означают эти атрибуты?

background-image — самый простой для понимания, он добавляет изображение в элемент.
background-position описывает where, в зависимости от элемента while. top выравнивается по верху элемента, справа, справа, слева и снизу соответственно.center помещает изображение в середину элемента. Вы также можете использовать данные% и px для выравнивания изображения.
background-repeat управляет повторением изображения. Если вы не войдете в эту строку, ваше изображение будет автоматически повторяться во всех направлениях; (если это не указывать, фоновая позиция также становится избыточной). no-repeat останавливает это и заставляет изображение появляться только один раз в вашем элементе. repeat-x ограничивает повторение по горизонтальной оси, а repeat-y — по вертикали.
background-attachment описывает, как фоновое изображение ведет себя при прокрутке страницы.прокрутка — это нормальное поведение изображения, иначе говоря, оно остается внутри своего элемента и перемещается вместе с этим элементом; fixed заставит изображение оставаться на том же месте, несмотря на то, что содержащий его элемент перемещается при прокрутке.

В первом у нас будет одно изображение, которое один раз будет центрировано в верхней части настраиваемого поля. Изображение будет расположено на расстоянии 20 пикселей от верхнего края поля; (заполнение поля не влияет на фоновые изображения). Кроме того, поле необходимо заполнить сверху, чтобы текст не находился над изображением и не читался; число 90 пикселей получается из высоты изображения (50 пикселей) + положение 20 пикселей от верхнего края + 20 пикселей для начала текста.
.welcome-box {
background : # EFE7E1 url (« h ttp: //…/welcome.png») no-repeat ;
background-postion: center 20px;
max-width: 400 пикселей;
маржа: авто;
отступ: 90 пикселей 20 пикселей 20 пикселей 20 пикселей;

}
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.
Вы также можете добавить фоновое изображение к заголовкам. Для этого требуется неповторяющееся изображение с дополнительным заполнением, чтобы текст не перекрывал изображение. Центральное значение в сочетании со значением left поместит изображение слева от заголовка, но по центру по вертикали.
.h2 {
цвет: # 332115;
фон : url (« h ttp: //… / welcome.png «) по центру слева без повтора ;
font-family: ‘Alegreya’, Georgia, Serif;
padding: 0 0 0 30px ;

}

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsmetum dolor sit amet. Lorem aipsum. constetur sadipscing elitr, sed diam.
Почему мне не нравится использовать

Использование CSS для управления внешним видом элементов в журнале делает ваш HTML более чистым и структурированным. Это очень помогает, когда вам нужно отредактировать то, что вы написали. Если вам нужно заменить изображение, часто проще найти URL-адрес в файле CSS, чем в HTML.
Это еще проще, если одно и то же изображение размещено более чем в одном месте; Вместо того, чтобы исправлять каждую ссылку, использование background-image позволяет вам использовать один и тот же класс более одного раза, но вам нужно исправить URL-адрес изображения только один раз.
Обычно рекомендуется помещать как можно больше информации в файлы CSS, а не в файлы HTML. Возможно, вам придется создать больше классов div, но вы получите лучший результат HTML.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Текст на этом изображении практически невозможно прочитать. Он очень загружен и варьируется между светлыми и темными частями, что затрудняет поиск хорошего цвета для шрифта.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

И снова текст по этому шаблону становится почти невозможно читать. Он очень загружен, разноцветен и затрудняет не только чтение, но и просмотр текста. Не говоря уже о поиске хорошего цвета для шрифта …
Это стандартный узор Photoshop, и вы действительно можете видеть, что он не повторяется бесшовно.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Это изображение градиента недостаточно велико, чтобы заполнить всю рамку; твердый край появляется там, где он заканчивается. Но, по крайней мере, в этом случае текст хороший и легко читаемый.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Стандартные изображения текстур, такие как набор темных и зернистых текстур I от northerndawn, добавляют приятный штрих фону коробки, сохраняя при этом удобочитаемость. Если у вас есть программа для редактирования изображений, вы можете раскрасить или настроить текстуры по своему вкусу. Наличие в изображении только одного оттенка и яркости также упрощает поиск хорошего цвета текста.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Тонкие и бесшовные узоры, как например. Предоставляемые Subtle Patterns, сохраняют текст читабельным и добавляют приятный тонкий штрих к элементу.
Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam.

Этот градиент хорошо сочетается с цветом фона элемента. Он не такой яркий, чтобы нарушить читаемость, но придает коробке тонкий эффект.
Краткий обзор типов файлов изображений
.JPG
Подходит для загруженных изображений, хороший контроль над размером файла, риск артефактов
.GIF
Изображения с небольшим количеством цветов, плохо для градиентов, с ограниченной прозрачностью, хорошо контроль над размером файла
.PNG
Хорошая прозрачность, небольшой контроль над размером файла, отсутствие артефактов
Обратите внимание на удобочитаемость в выборе фонового изображения, делайте его тонким
Используйте легко повторяемые узоры
Подготовьте изображения в правильном размере
Используйте для изображений наилучший из возможных типов
Управляйте изображениями через CSS, а не через HTML
А теперь? Удачного кодирования
А если вам нужны изображения… вот вам помощь

Ресурсы шаблонов
Ресурсы и изображения> Ресурсы приложений> Шаблоны Photoshop
Найдите «Бесшовные шаблоны» в ресурсах и изображениях
Тонкие шаблоны | Бесплатные текстуры для вашего следующего веб-проекта
pattern8 | Скачать бесплатно повторяющиеся узоры
Online Pattern Creators
Seamless Lite — Дизайн бесшовных узоров от COLOURlovers
BgPatterns — Background Patterns Maker
Tartan Designer — Tartan Maker — Генератор фоновых узоров Tartan
Patternify | Генератор шаблонов CSS
Руководства и ресурсы для создания бесшовных узоров
Бесшовные узоры и их использование с CSS от fantasy-alive
Бесшовные текстуры в Photoshop от redheadstock
Учебное пособие по повторяющимся узорам от Cpresti
Учебное пособие по повторяющимся узорам от PeriwinklePaisley
Simple Snowy Seamless Учебник по шаблонам от ChewedKandi Учебник по бесшовным узорам
от ceanji
Бесплатный генератор шаблонов действий от Giallo86
Текстуры
Просмотр текстур на deviantART
Бесплатная библиотека текстур Mayang
Бесплатные текстуры от TextureKing
[CG Textures] — Текстуры для 3D, графического дизайна и Photoshop!
Plaintextures — бесплатные текстуры высокого разрешения для профессионалов.
Обратите внимание на Условия использования провайдера! На dA так же, как и с других сайтов. Не каждый сайт использует законные источники.
Есть предложения?

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

19 CSS-анимированных фонов
Коллекция отобранных вручную бесплатных HTML и CSS-анимированных фонов примеров кода.Обновление коллекции за январь 2019 г. 7 новинок.
Фоновые узоры CSS
Фиксированные фоны CSS
CSS-фоны частиц
Фон треугольников CSS
Фоновые эффекты JavaScript
Фоновые плагины jQuery

Автор
Кастра Демосфен
2 октября 2019
О коде
CSS-анимация «Падающие листья»
Октябрьские падающие листья CSS-анимация CSS без JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
адаптивный: да
Зависимости: —
Автор
Матье С.
27 сентября 2019
О коде
Шумовой фон
CSS — только анимированный фон статического шума.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Адам Абундис
27 сентября 2019
О коде
Шаблонная анимация (бесконечная)
Используется Flexbox для вертикального и горизонтального центрирования текста.Используется ключевых кадра для установки бесконечной прокрутки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Юске Накая
17 мая 2019
О коде
Только CSS: Предупреждение
Полосатый фон.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Игорь Миленкович
15 февраля 2019
О коде
Прохладный горный фон
Классный горный фон с анимацией — слегка отзывчивый.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Вайбхав Арора
1 января 2019 г.
О коде
Анимированный фон с рябью
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Роб ДиМарзо
16 декабря 2018
О коде
Бесконечный SVG Треугольник Fusion
Треугольники созданы.Треугольники уничтожены.
И так далее и тому подобное. Я создаю 60 SVG, каждый из которых содержит 4 треугольника (многоугольника). Каждый многоугольник циклически проходит через цвет и анимируется наружу от центральной точки родительского SVG каждую 1 секунду. Вся анимация повторяется бесконечно каждые 4 секунды.
Каждый div имеет clip-path для создания шестиугольной маски. Когда шестиугольники соединяются вместе, расширяющиеся треугольники равномерно переходят в треугольники соседних шестиугольников, пока не исчезнут.
Я использовал CSS Grid в качестве отправной точки, но у меня все равно осталась куча хорошо воспитанных шестиугольников с пустым пространством между ними. Чтобы «соединить» шестиугольники, я идентифицировал nth-children , который соответствует строке, и перемещал их вверх и снова с помощью преобразования : translate;
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Крис Нил
9 декабря 2018
Сделано с
HTML / CSS (SCSS) / JavaScript (Babel)
О коде
Анимированный градиент маски-изображения CSS
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
Майк Голус
6 декабря 2018
О коде
CSS Светлячки
Элегантное решение, предназначенное только для HTML / CSS, для добавления спокойного эффекта светлячков на вашу страницу.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Такеши Кано
21 сентября 2018
О коде
Чистая анимация частиц CSS
Анимация частиц CSS без JavaScript. Самым важным моментом является случайное движение частиц. Виньетирование было создано свойством mask-image .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
Анастасия Гудвин
22 мая 2018
О коде
Чистый CSS Фон мерцающих звезд
Анимация тонких мерцающих звезд и движущихся облаков с использованием только CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
осорина ирина
25 февраля 2018
О коде
Фоновый эффект
Эффект фона HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Мохаммад Абдул Мохайман
25 февраля 2018
О коде
Анимированный фон на чистом CSS
Анимированный фон на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Крис Смит
4 августа 2017
О коде
Фоновый эффект скользящих диагоналей
Анимированный фон под контентом.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Анимация фона
Фоновая анимация HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Чандан Чоудхари
17 мая 2016
О коде
Анимированный фон
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
Мануэль Пинто
13 мая 2016
О коде
Чистая анимация фона CSS3 с градиентом
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
CSS Анимация фона
Пример фоновой анимации с использованием CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
коотоопас
4 декабря 2013 г.
О коде
Бесконечная анимация фона
Чистый CSS бесконечный фоновая анимация .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Добавить фоновое изображение в кампанию
Мы Вам поможем —
Получите свой бизнес в Интернете
Сайты
Создайте бесплатный веб-сайт со встроенными маркетинговыми инструментами.
Домены
Заявите права на персональный домен, чтобы людям было проще найти ваш бренд в Интернете.
Посмотреть обзор
Продвигайте свой бизнес
Эл. адрес
Привлекайте аудиторию красивыми фирменными электронными письмами.
Целевые страницы
Создавайте целевые страницы, которые расширяют вашу аудиторию и помогают продавать больше товаров.
Цифровая реклама
Обратитесь к людям в Facebook, Instagram и в Интернете.
Социальные медиа
Увеличьте число подписчиков с помощью таргетированной рекламы и обычных публикаций в Facebook, Instagram и Twitter.
Открытки
Отправляйте распечатанные открытки по всему миру с помощью нашего средства поиска адресов.
Посмотреть обзор
Особенности платформы —
Управление аудиторией
Творческие инструменты
Автоматизация маркетинга
Статистика и аналитика
Отчеты
Отслеживайте продажи и эффективность кампании в удобных для понимания отчетах.
A / B тестирование
Запустите A / B или многовариантный тест, чтобы оптимизировать контент, макет или время отправки.
Обзоры
Оценивайте интерес и удовлетворенность клиентов, собирая отзывы.
Все инструменты аналитики
Не уверен, где начать? —
Что мне подходит?
Электронная коммерция и розничная торговля
Увеличивайте посещаемость и продажи с помощью маркетинговой платформы, которая легко интегрируется с вашим магазином.
Мобильные и веб-приложения
Привлекайте новых клиентов, отправляйте кампании на основе поведения и увеличивайте взаимодействие с вашим приложением.
Стартапов
Найдите продукт, соответствующий рынку, изучите отзывы пользователей и запустите свои первые маркетинговые кампании.
Агентства и фрилансеры
Получите привилегии и инструменты для управления клиентами, когда вы присоединитесь к нашему бесплатному сообществу Mailchimp & Co.
Обновления продукта
Получайте последние новости о новых функциях, улучшениях продуктов и других объявлениях.
Узнай что нового
.

Как сделать картинку фоном в css: Как сделать картинку фоном в HTML и CSS. 3 простых способа

Как сделать фон картинкой

Учебник CSS 3. Статья «Работа с фоном элемента в CSS»

Управление повтором фонового изображения

Управление позицией фонового изображения

Фиксированный задний фон

Свойства CSS 3 для работы с фоновыми изображениями

Универсальное свойство background

Вопросы и задачи по теме

Фон и границы — Изучение веб-разработки

Фоновый цвет

Фоновое изображение

Свойство background-repeat

Изменение размеров фонового изображения

Позиционирование фонового изображения

Градиент в качестве фона

Несколько фоновых изображений

Закрепление фона

Использование сокращенного свойства background

Доступность просмотра

Закруглённые углы

масштабируем фон — учебник CSS

Значения background-size

Ключевые слова

Числовые значения

Поддержка браузерами

Фоновые изображения в css

Способы создания прозрачных фонов у блоков в CSS

Как задать прозрачность?

CSS свойство Opacity

Использование PNG -картинки

Формат системы RGBA

Клетчатые изображения, или с уважением к истории

Подытожим?

Курсы по CSS (в открытом доступе)

Изменение размера фоновых изображений с помощью background-size — CSS: Cascading Style Sheets

HTML

CSS

Результат

содержат

HTML

CSS

Результат

cover

HTML

CSS

Результат

Фоны и границы — Изучите веб-разработку

Цвета фона

Фоновые изображения

Контроль повторения фона

Изменение размера фонового изображения

Расположение фонового изображения

Градиентный фон

Несколько фоновых изображений

Вложение фона

Использование сокращенного свойства фона

Рекомендации по обеспечению доступности для фона

Закругленные углы

Как применить преобразования CSS3 к фоновым изображениям

Преобразование только фона

Фиксация фона на преобразованном элементе

фоновых изображений от pica-ae на DeviantArt

Проблемы с использованием изображений:

Но у вас есть больше возможностей для управления изображениями.

Что означают эти атрибуты?

Почему мне не нравится использовать <img class="lazy lazy-hidden" src = "…" /><img src = "…" />

Краткий обзор типов файлов изображений

Есть предложения?

19 CSS-анимированных фонов

Автор

О коде

CSS-анимация «Падающие листья»

Автор

О коде

Шумовой фон

Автор

О коде

Шаблонная анимация (бесконечная)

Автор

Почему мне не нравится использовать