Фон картинка css: background-image | htmlbook.ru

CSS 3 работа с фоном и изображениями

В этой части учебнике вы узнаете как происходит работа с фоном в CSS, ну и конечно с изображением.

Свойства CSS для фона:

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

• background-color — Определяет цвет фона;
• background-image — Назначает фоновое изображение;
• background-size — Масштабирует картинку;
• background-position — Задаёт начальное значение изображению;
• background-origin — определяет область позиционирования фонового рисунка;
• background-repeat — Повторение картинки;

Если с первым всё понятно, просто меняет цвет, то с остальными посложнее.

CSS работа с изображениями:

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

Как видите тут просто один блок, теперь покажу  как установить картинку фоном в CSS.

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

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

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

Как видите картинка нормально отображается, так как надо.

Ещё один пример:

Перейдём ещё к одному примеру, только уже посмотрим кое что другое.

То есть, единственное что поменял, это картинку, вот результат.

Как можете понять, тут проблема в том, что картинка повторяется, поэтому, я сейчас покажу как убрать повторение картинки в CSS.

Я добавили свойство background-repeat, со значением no-repeat, что значит убрать повторение, также сделал что бы картинка отображалась по середине.

Всё работает так как я сказал, что очень хорошо.

Вывод:

В этой части учебника мы разобрали работа с фоном и изображениями в CSS, но тут были рассмотрены самые популярны способы применения их.

Подписываетесь на соц-сети:

Оценка:

(Пока оценок нет)

Поделится:

Дополнительно:

Учебник 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> полностью заполнился фоновым изображением.

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

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

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

Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом 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).

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

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

Значение	Описание
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 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.

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

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

Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами 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). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

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

Свойства 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) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

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

И так на очереди следующее 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) — фон элемента занимает все содержимое элемента.

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

Как вы могли заметить свойства 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) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

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

Универсальное свойство 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 ).

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

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

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

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

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

• Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):

  Практическое задание № 28.

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

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

css фон картинка на весь экран

Автор admin На чтение 6 мин.

Задача

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

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

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

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

Кроссбраузерность:

Opera 10+ (Opera 9. 5 поддерживает background-size но не поддерживает ключевых слов)

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

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим.

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

Кроссбраузерность:

Любые версии популярных браузеров: Safari / Chrome / Opera / Firefox

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

Еще один простой способ реализовать это, вставить картинку на страницу. Она будет иметь фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min- w >height 100%. Также нужно заранее подготовить картинку, в плане пропорциональности сторон.

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

Кроссбраузерность:

Safari / Chrome / Firefox (не тестировалось на более древних версиях)

Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

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

Здесь не реализовано центрирование, но вы с легкостью можете сделать это.

Кроссбраузерность:

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!

CSS свойство background-image как антипаттерн

CSS свойство background-image позволяет нам делать крутые вещи, но в большинстве случаев наступило время оставить его позади. На всякий случай — что такое антипаттерн.

Перевод статьи The CSS background-image property as an anti-pattern

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

Сама проблема заключается не в свойстве background-image как таковом. Зачастую оно используется там, где ему совсем не место, например в CTA изображениях или для графики, имеющей отношение к элементам UI.

Если использовать его неправильно, то оно вполне может стать антипаттерном. Но есть ли подходящие кейсы для использования background-image? Несомненно есть.

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

Давайте не будем вспоминать дни танцующих хомячков на фоне.

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

Вот несколько причин почему использованием background-image может быть плохой практикой в вёрстке:

Изображения, которые лежат в background-image не краулятся или не индексируются Google. Не велика проблема, да? Тогда посмотрите эту цитату из статьи How to Rank in Google Image Search на moz.com:

Треть всех поисковых запросов в Google выходит на изображения и 12.5% страниц с результатами поиска показывают блоки(карточки) с результатами для изображений.

Давайте призадумаемся. Одна треть или 33% всех запросов в Google выходит на изображения. Если картинка релевантна теме страницы или бизнес направлению вашего клиента (а если и нет, то возможно должно быть), вам точно нужно быть проиндексированным.

Если вы используете background-image, то тут вы в пролёте и у вас не может быть тега alt=«», чтобы отдать Google описание и контекст изображения.

Это плохо для доступности (Accessibility)

Свойство background-image не очень хорошо сказывается на доступности. Скринридеры будут полностью его игнорировать.

Посмотрите на ограничения с доступностью в этом случае:

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

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

Совет: Если вы хотите, чтобы скринридер пропустил изображение (ну вдруг это просто элемент дизайна), просто оставьте alt="" пустым (использование role="presentation" тут не самый оптимальный вариант, так как оно нарушает первое правило ARIA).

Плохо для производительности

Как свойство background-image может негативно влиять на производительность?

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

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

Тут ощутимая разница будет заметна на мобильных устройствах или при медленных интернет соединениях, так же как и на вычислительной мощности, требуемой для масштабирования изображений. Посмотрите статью Post-Mortem: Applied Image Optimization.

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

Пока вы можете это сделать через @media запросы с помощью CSS background-image, но в итоге, это будет довольно обременительным подходом, если вам понадобится изменить изображение или переименовать его, ну или поменять его версию.

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

Так как это всё слишком замудрено, люди просто забивают на этот момент и в итоге имеют одну версию изображения для всех размеров экранов и разрешений.

Хотя и есть всякие JavaScript библиотеки как bgset, но зачем добавлять ещё больше JavaScript для решения проблемы у которой и так много недостатков?

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

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

Ещё одна польза в том, что если ваши изображения вставлены в CSS через background-image, браузеру нужно скачать и запарсить ваш CSS, перед тем, как он сможет запросить изображения.

Это говорит о том, что ваше “основное” изображение будет понижено в очереди загрузок и довольно медленно загрузится, имея низкий приоритет. Если вы используете изображения через HTML элементы, то браузер может запросить их куда быстрее, иногда даже перед началом загрузки стилей страницы.

Плохо для CMS и CDN

Свойство background-image также не очень хорошо, если дело касается CMS’ок и CDN’ов.

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

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

Если у меня есть ссылка на изображение, вставленная в CSS, то я сделаю глобальный поиск в редакторе и заменю все свои изображения, а вернее ссылки на них с локальных на CDN’овские.

Если вы предварительно выставили ссылки на изображения, как переменные с помощью CSS Variables, то вам повезло! Но большинство людей так не делает и необходимость в создании и деплое CSS с обновленными ресурсами, всякий раз как вы хотите обновить ваши изображения кажется ну уж слишком избыточной для работы с таким таском. Но придется делать либо так, либо генерить инлайновый CSS, но давайте уже обойдемся без этого.

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

Вообще, вставка ссылок на изображения в CSS сейчас мне кажется каким-то хардкодингом.

Ну так, а когда это выходит хорошим подходом?

Итак, мы только что обсуждали недостатки, но когда же выходит было бы хорошо воспользоваться background-image?

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

Хорошо использовать background-image тогда, когда вам нужно просто фоновое изображение и ничего более.

Если вы так делаете, то рассмотрите использование image-set() вместе с background-image(), чтобы уменьшить проблемы с производительностью, упомянутые выше.

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

Используйте <picture>!

Я полагаю, что весьма весомой причиной широкого использования background-image является сопутствующее свойство — background-size: cover;, которое точно даст вам знать, что заданное изображение покрывает всю положенную область, к которой оно прикреплено.

Свойство object-fit уже спешит на помощь!

Если вы используете семантически верный элемент в купе со свойством object-fit, то вы получите тот же самый эффект, что и в случае с background-size: cover;, но также вы получите ещё и такие плюшки: SEO-friendly изображения.

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

Отличную работу с CMS сгенерированными ссылками на изображения и CDN’ами.

Этот подход будет отлично работать с srcset для оптимизированных изображений

Вы сможете использовать <source> для передовых форматов изображений, таких как .webp.

Это вообще не сложно сделать, а профитов немерено! Свойство object-fit указывает изображению или видео то, как оно должно умещаться в родительский контейнер. Вам нужно просто поменять это:

<div>
</div>

На это:

<picture>
  <img src="/some/man-with-a-dog.jpg"
       alt="Man with a dog"
      
  />
</picture>

Очевидно, что в обоих случаях вы бы не стали использовать инлайновые стили, но к нашей радости вы можете видеть то, какой гибкий подход у нас есть под рукой, если бы мы оставили background-image свойство и использовали бы действительно семантические HTML элементы, такие как <picture> и <img>.

Затем мы можем в лёгкую добавить адаптированные по размерам изображения через srcset. Мы также можем легко использовать передовые форматы, такие как .webp на выбор браузера из <source>.

Более того, мы можем воспользоваться преимуществом таких плюшек, как нативная ленивая загрузка в Chrome, ну и в других бразуерах тоже, как только они её внедрят.

Вот как бы выглядел код, который делает все эти вещи:

<picture>
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
       
        type="image/webp"
    />
    <source
        srcset="/some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,
                /some/_970x545_crop_center-center/man-with-a-dog.jpg 970w,
                /some/_750x562_crop_center-center/man-with-a-dog.jpg 750w,
                /some/_320x240_crop_center-center/man-with-a-dog.jpg 320w"
       
    />
    <img
        src="/some/man-with-a-dog-placeholder.jpg"
        alt="Man with a dog"
       
        loading="lazy"
    />
</picture>

Так мы получаем:

Ленивую загрузку, если браузер её поддерживает (в противном случае они не происходит, всё нормально)

webp, если браузер его поддерживает.

srcset из оптимизированных адаптивных изображений на выбор браузера.

SEO-friendly, прогрессивное улучшение, доступность и производительность — всё это обернуто в одной, хорошо сделанной компактной вундервафле.

Boom!

И все эти изображения могут быть автоматически заресайзены прямо из CMS, с помощью таких инструментов, как ImageOptimize, упрощая ссылаемость на CDN или Amazon S3. И в конце концов, вы же можете делать обрезку изображений с помощью object-fit.

Со старым в новое!

Поддержка бразуерами <picture> и scrset фантастически хороша! (есть даже полифиллы, если они вам нужны.) и такая же хорошая поддержка для object-fit (тоже есть полифилл). Ещё один хороший паттерн для использования через polyfill.io.

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

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

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

Я думаю, что в конечном итоге вы поймете то, что ваши сайты станут более SEO-friendly, более доступны и куда более производительнее… а еще у вас будет ощущение удовлетворенности от написания на семантически грамотном HTML.

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

Если все это заинтересовало вас в плане оптимизации изображений, обратите внимание на отличную книгу images.guide, чтобы узнать об этом ещё больше!

Enjoy your object-fit!

Цвет фона и фон изображение на сайте

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

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

Теория и практика

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

Фон в виде цвета

Фон в виде цвета задается и для того чтобы, если пользователь зашел с отключенными картинками ему не показывался белый фон. Цвет фона в CSS задается свойством background-color. Рассмотрим на примере:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        текст
    </div>
</body>
</html>

Зададим цвет фона для всей страницы светло-розовый, а для блока <div> — голубой.

1
2
3
4
5
6
7
8

body{
    background-color:#FFC4C4; /* светло-розовый цвет */
}
 
#content1{
    background-color:#C4D4FF; /* голубой цвет */
    height:150px;
}

Как это выглядит в браузере:

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

Для примера возьмем следующий html код:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        Здесь вставьте много текста!
    </div>
</body>
</html>

Вставим на фон большое изображение:

1
2
3
4
5
6
7
8

body{
    background-image:url('bg.jpg'); /* изображение для фона */
}
 
#content{
    width:600px;
    margin:0 auto;
}

Посмотреть примерСкачать

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

1
2
3
4
5
6
7
8
9
10
11

body{
    background-image:url('bg.jpg'); /* изображение для фона */
    background-repeat:no-repeat; /* запрещаем повтор изображения */
    background-attachment:fixed; /* фиксируем изображение */
    background-color:#cccccc; /* задаем фон, если изображения на странице отключены */
}
 
#content{
    width:600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Вот как это выглядит в браузере:

Посмотреть примерСкачать

А сейчас рассмотрим повтор фонового изображения. Для примера возьмем тот же код html страницы:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        Здесь вставьте много текста!
    </div>
</body>
</html>

В CSS пропишем(но вместо bg.jpg у нас картинка маленькая, которая в дальнейшем будет повторяться):

1
2
3
4
5
6
7
8
9

body{
    background-image:url('bg.jpg'); /* изображение для фона */
    background-repeat:no-repeat; /* запрещаем повтор изображения */
}
 
#content{
    width:600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Если мы напишем следующим образом то в браузере увидим:

Поэтому чтобы сделать так чтобы изображение повторялось в CSS необходимо написать следующее:

1
2
3
4
5
6
7
8
9

body{
    background-image: url('bg.jpg'); /* изображение для фона */
    background-repeat: repeat; /* повторяем изображение */
}
 
#content{
    width: 600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Как это выглядит в браузере:

Посмотреть примерСкачать

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

Больше практикуйтесь!

фоновых изображений CSS теперь поддерживаются в Outlook.com

Отличные новости! Outlook.com и Office 365 Outlook (также известный как OWA) теперь поддерживает фоновые изображения CSS. До сих пор свойства веб-почты Microsoft поддерживали только атрибуты фоновых изображений таблиц и не поддерживали фоновые изображения CSS. Это ограничение вынудило дизайнеров электронной почты использовать атрибуты фона таблицы для отображения фонового изображения в Outlook.com.

К счастью, эта поддержка включена как в «классическом», так и в бета-версии клиентов веб-почты Outlook. Это изменение также распространено на приложения Outlook для iOS и Android. Большое спасибо Jóni de Sousa из Altaire, который предупредил меня об этом.

Преимущества фоновых изображений CSS

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

Атрибут фонового изображения на таблице

  <таблица>  
...
    

CSS фоновое изображение

  фоновое изображение: url ('bgimage.jpg')  

Фоновые изображения по-прежнему не поддерживаются повсеместно

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

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

Поддерживаемые свойства фона в Outlook.com

Outlook.com поддерживает фоновые изображения как в сокращенном виде, так и в отдельных свойствах.

  фон: url ('bgimage.jpg') center / cover no-repeat # 888888;
  

Из-за особенностей других клиентов, таких как Yahoo! Почта с сокращенными стилями фона, вероятно, лучше всего использовать отдельные свойства при использовании фоновых изображений.В Outlook.com поддерживаются следующие свойства фона:

  фоновое изображение
фон-повтор
размер фона
background-position
фоновый цвет
фон-происхождение
фон-вложение  

Не угадай, попробуй!

В Email on Acid тестирование составляет основу нашей миссии. После того, как вы закончите настройку идеального дизайна для своей кампании, убедитесь, что письмо отлично выглядит в КАЖДОМ почтовом ящике. Поскольку каждый клиент обрабатывает ваш HTML-код по-разному, очень важно протестировать вашу электронную почту на самых популярных клиентах и ​​устройствах.

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

Начните тестирование сегодня!

Автор: Алекс Ильхан

Родом из Англии, Алекс привносит свой опыт в разработке электронной почты вместе с бесконечным потоком чашек чая и британским цинизмом.Следуйте за ним в Twitter: @omgitsonlyalex.

Автор: Алекс Ильхан

Родом из Англии, Алекс привносит свой опыт в разработке электронной почты вместе с бесконечным потоком чашек чая и британским цинизмом.Следуйте за ним в Twitter: @omgitsonlyalex.

Расширенное управление фоновыми изображениями с помощью CSS • Code The Web

Фоновые изображения могут сделать больше, чем вы думаете — узнать о классных способах управления фоновыми изображениями с помощью CSS…

Начало работы

Я думаю, что лучше всего учиться на практике, поэтому я настоятельно рекомендую следовать всем своим урокам.Чтобы продолжить, начните с создания новой папки проекта с файлами index.html и style.css в ней. Добавьте следующий код в свой index.html :

  

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

  

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

И добавьте background-image к элементу body в вашем стиле .css file:

  body {
    высота: 150vh;
    background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg');
}
  

Если вы не знаете, как использовать свойство background-image , сначала проверьте здесь — я буду здесь, когда вы вернетесь!

Причина, по которой корпус имеет высоту , заключается в том, что мы можем прокручивать нашу страницу — вы увидите, почему это актуально позже в руководстве. 150vh в основном означает 150% высоты окна просмотра.

Когда вы открываете HTML-файл в браузере, он должен выглядеть так:

Если ваш файл выглядит правильно, давайте продолжим!

Помимо свойства background-image , существует множество свойств, которые изменяют способ отображения background-image :

• background-size
• background-position
• background -repeat
• background-size

В этой статье я рассмотрю каждый из них по отдельности… Давайте приступим!

background-size

Помните исходное изображение?
Однако на нашей странице небо очень увеличено!
Это потому, что по умолчанию для фонового изображения заданы фактические размеры изображения ( 4272 пикселей, на 2848 пикселей, )

Давайте исправим это!

Свойство background-size может быть установлено как , покрывает , содержит или любое значение единицы (например. 1500 пикселей ).

background-size: cover устанавливает размер изображения так, чтобы оно покрыло весь элемент (в данном случае тело ).

background-size: contain гарантирует, что все background-image отображаются внутри элемента.

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

  body {
    высота: 150vh;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: обложка;
}
  

Результат:
Если вы прокрутите вниз, вы увидите большую часть изображения — это потому, что оно покрывает элемент body (что составляет 150% высоты области просмотра), а не фактический экран.

Вы также можете установить background-size на фактическое значение — измените свой CSS на это:

  body {
    высота: 150vh;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: 2000 пикселей;
}
  

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

прикрепление фона: фиксированное

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

  body {
    высота: 150vh;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: 2000 пикселей;
    background-attachment: исправлено;
}
  

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

ВАЖНО:
Прежде чем продолжить, удалите строку background-attachment: fixed , чтобы мы могли сосредоточиться на других свойствах. Ваш CSS должен выглядеть так:

  body {
    высота: 150vh;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: 2000 пикселей;
}
    

background-position

Как вы можете видеть, отображается не все изображение — но какая часть отображается как ?

Что, если мы хотим показать центр изображения?

Здесь мы можем использовать свойство background-position :

  body {
    высота: 150vh;
    background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg ');
    размер фона: 2000 пикселей;
    background-position-x: center;
    background-position-y: center;
}
  

Результат:

background-position-x и background-position-y используются для позиционирования изображения по горизонтали ( x ) и вертикали ( y ).

Допустимые значения для background-position-x :

И для background-position-y :

Кроме того, оба принимают числовые значения, например 200px .Они рассчитываются от правого верхнего угла. Так, например, background-position-x из 500px будет 500px слева, а background-position-y из 300px будет 300px сверху.

А пока оставим оба значения как center … (хотя вы можете поиграть, если хотите 😉)

background-repeat

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

  body {
    высота: 150vh;
    background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg');
    размер фона: 500 пикселей;
    background-position-x: center;
    background-position-y: center;
}
  

Результат:

Подождите, что? Но это же грабеж! Мы даже не использовали background-repeat !

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

Свойство background-repeat имеет два основных значения: repeat и no-repeat . Это так просто!

По умолчанию для background-repeat установлено значение repeat , поэтому обычно вам не нужно это использовать. Однако что, если вы хотите отключить плитку? Давайте попробуем:

  body {
    высота: 150vh;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: 500 пикселей;
    background-position-x: center;
    background-position-y: center;
    фон-повтор: без повторения;
}
  

Результат:
(причина того, что изображение находится в нижней части экрана, состоит в том, что высота тела составляет 150%, помните?)

Итак, мы идем! Вот как работает свойство background-repeat в CSS!

Несколько фонов

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

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

Итак, попробуем! Помните, что цвет фона : оранжевый идет первым, потому что мы хотим, чтобы он был ниже изображения:

  body {
    высота: 150vh;
    цвет фона: оранжевый;
    background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg ');
    размер фона: 500 пикселей;
    background-position-x: center;
    background-position-y: center;
    фон-повтор: без повторения;
}
  

Результат:

Заключение

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

Также, если вам понравилась эта статья, я был бы рад, если бы вы поделились ею или подписались на информационный бюллетень.Создание блога (25 000 слов и их количество) требует много времени и усилий, и я был бы очень признателен, если бы вы сделали одно (или оба!) Из этих вещей.

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

CSS Фоновое изображение с фиксированной позицией

Фоны стали неотъемлемой частью создания веб-сайтов в стиле Web 2.0, поскольку градиенты вошли в моду. Если вы думаете, что градиентный фон слишком банален, может быть, вам подойдет фон с фиксированным положением? Он действительно обеспечивает аккуратный неотъемлемый эффект, не двигаясь.

CSS

Разместите объявление фона выбранного элемента.

 body {background: url (your-image.jpg) вверху справа без повтора; background-attachment: исправлено; } 

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

• Любимые демо-версии CodePen Криса Койера

  Дэвид спросил меня, готов ли я принять участие в гостевом посте, в котором выберут некоторые из моих любимых ручек от CodePen.Непростая задача! Существует так много! Мне удалось выбрать несколько, которые поразили меня за последние несколько месяцев. Если вы …

• CSS @supports

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

• Обнаружение префикса поставщика с помощью JavaScript

  Независимо от нашей позиции в отношении префиксов поставщиков, мы должны жить с ними и время от времени использовать их, чтобы все работало.Эти префиксы могут использоваться в двух форматах: формате CSS ( -moz- , как в -moz-element ) и формате JS ( navigator.mozApps ). Великолепный проект X-Tag имеет …

Фоновые изображения — доступность для продуктов

Фоновые изображения, передающие информацию или смысл, должны иметь доступную альтернативу.

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

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

iOS

iOS не различает фоновые изображения и изображения переднего плана. Все изображения, добавленные в представление, обычно добавляются как представление изображений ( UIImageView ).Если полученное изображение является декоративным, необходимо установить для свойства isAccessibilityElement значение false , чтобы его нельзя было идентифицировать для VoiceOver. При желании укажите «пустую» accessibilityLabel . Если полученное изображение передает информацию, вы должны установить для этого свойства значение true , а также предоставить текстовый эквивалент через атрибут accessibilityLabel .

Пример iOS (Objective-C)

Значимый образ:

  [myFunctionalImage: setIsAccessibilityElement: ДА];
[myFunctionalImage.setAccessibilityLabel: @ "[альтернативный текст]";
  

Декоративное изображение:

  [myFunctionalImage: setIsAccessibilityElement: NO];
[myFunctionalImage.setAccessibilityLabel: @ ""];
  

Android

Android не различает фоновые изображения и изображения переднего плана. Все изображения, добавленные в представление, обычно добавляются как ImageView и должны иметь атрибут android: focusable . Этот атрибут должен иметь значение true для значимых изображений и false для нефункциональных декоративных изображений.Атрибут android: contentDescription также должен быть предоставлен для значимых изображений, чтобы предоставить альтернативный текст для изображения. Он также должен быть предоставлен для декоративных изображений и иметь значение @null для поддержки более старых версий Android.

Пример Android Pass

Значимый образ:

Декоративное изображение:

HTML

Не существует специальной техники для назначения альтернативного текста фоновым изображениям на основе CSS.Поэтому используйте либо встроенное изображение на основе HTML (с использованием элемента img ), либо подходящую технику замены изображения в CSS и JavaScript, чтобы обеспечить текстовую альтернативу. См. Assets.cms.gov — Режим высокой контрастности для примера реализации.

Пример передачи HTML

Собственный (предпочтительный) подход:

Тестирование

Процедуры

1. Активируйте программу чтения с экрана.
2. Определите все изображения, содержащие информацию.
3. Определите, какие изображения являются фоновыми изображениями.
4. Убедитесь, что программа чтения с экрана объявляет альтернативный текст.
5. В некоторых случаях может потребоваться проверка кода или тестирование на немобильном устройстве.

Результат

Верна следующая проверка:

• Изображение можно сфокусировать с помощью вспомогательных технологий, при этом объявляется значимая информация.

  No related posts.