Как сделать изображение фоном в html: Как добавить фоновый рисунок на веб-страницу?

Содержание

Учебник 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 был использован.

Как задать картинку фоном страницы. Самоучитель HTML

В этой главе мы научимся делать фон страницы картинкой.

Это делается очень просто, почти так-же как и цвет фона страницы, но атрибутом background:

        <html>
        <head>
        <title>Фон страницы - картинка</title>
        </head>
        <body text="red" bgcolor="#cccccc" background="images/fone.png">
        </body>
        </html>

Атрибут background указывает путь к картинке. В нашем случае картинка в папке images, имя картинки fone , а расширение png.

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

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

Мы с вами закончили изучать ссылки, а теперь еще изучили способы использовать картинки в HTML-документах и осталось нам совместить эти два раздела. Предлагаю сделать код баннера(ссылки-картинки), мы знаем основной шаблон текстовой ссылки:
<A href=»»> анкор </a>
А в ссылке картинке вместо текста вставляется код картинки:
<A href=»» > <img src=»images/logotip.png» alt=»Супер сайт»> </a>
И не забывайте в картинку вставлять размеры атрибутами width height:
<A href=»» > <img src=»images/logotip.png» alt=»Супер сайт» width=»468″ > </a>

ВСЕ!!!
А мы переходим к более интересному- ТАБЛИЦАМ!!!

Работа с фоном. Фоновое изображение на практике — Вёрстка

1. Теория
2. Фоновый цвет на практике

3. Фоновое изображение на практике

Повторение

В HTML для вставки изображения есть атрибут BACKGROUND. Все бы ничего, но вот повторялось изображение как хотело. То есть если у вас была таблица 200х200 и рисунок 100х100, то в таблице вы увидите ровно четыре одинаковых рисунка.

<TABLE WIDTH=200 HEIGHT=200 BACKGROUND="fon.gif"> <TR VALIGN=top><TD>четыре фоновых изображения</TD></TR> </TABLE>

четыре фоновых изображения

Чтобы этого избежать, надо было сделать рисунок 200х200, загнать в верхний левый угол наше фоновое изображение, а остальную часть рисунка сделать прозрачной. Если же повторения надо было избежать для всей страницы, то рисунок приходилось делать 1200х900 и более. С появлением CSS проблема ушла в прошлое, сейчас для этих целей служит свойство background-repeat. Например, можно вообще запретить повторение изображения.

<DIV> одно фоновое изображение </DIV>

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

Повторение по одной из осей тоже очень полезная штука. Например, сделал дизайнер что-то вроде этого:

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

Резиновый дизайн обуславливает и то, что нельзя разбивать макет на отдельные таблицы, чтобы сохранить одинаковые ширины колонок при некоторых разрешениях. То есть вся страница заверстывается в одну большую таблицу. Как же решить проблему? Решение, как вы догадываетесь, есть. Надо сделать отдельный слой, в котором будет прописан background в виде одного элемента переплета. Слой должен накладываться на всю таблицу. Сперва мы верстаем таблицу так, словно никакого переплета нет, а затем позиционируем слой с переплетом на нужное нам место:

#to { position: absolute; top: 74px; left: 0px; width: 100%; color: #000; background: url(i/bgall.gif) repeat-x; z-index: 10}

. . .

Позиционирование

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

Три колонки, между которыми есть разделительная пунктирная линия. Если верстать таблицами, то нам надо сделать пять столбцов. Если же верстать блоками, то надо сделать всего лишь три блока. Как же тогда реализовать разделители? Очень просто, с помощью background-position. У нас три блока примерно с таким кодом:

#left-col { width: 25%; float: left}

#main-col {

width: 50%;

float: left}

#right-col {

width: 25%;

float: left}

. . .

Чтобы создать разделитель, нам надо в графическом редакторе вырезать один элемент последовательности, то рисунок 1х5 пикселей, который будет состоять из одной черной точки и четырех белых. После этого надо его внедрить в блок #left-col и заставить повторяться только по вертикали. А затем позиционировать его на 100%, то есть максимально вправо:

#left-col { width: 25%; background: url(bg.gif) repeat-y;&nbsp background-position: 100% 0%; float: left}

Обратите внимание, что позиционирование фонового изображения производится относительно блока, то есть ширина блока у нас 25% относительно ширины экрана, а позиционируется он на 100% относительно ширины блока, то есть на 25% относительно ширины экрана. Совершенно аналогично поступаем с блоком main-col (для сокращения кода запишем все свойства фона в background):

#main-col { width: 50%; background: url(bg.gif) repeat-y 100% 0%;&nbsp float: left}

Собственно говоря, больше ничего сложного в работе с фоном нет. Для вас, я надеюсь, тоже.

Михаил Дубаков

1. Теория
2. Фоновый цвет на практике

3. Фоновое изображение на практике

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

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

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

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

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

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

Области боксовой модели CSS

У элемента в CSS определены три области, называемые боксами: border box (бокс по границы включительно), padding box (бокс по отступу) и content box (бокс по содержимому). border box – область элемента, которая включает всю его внутреннюю часть плюс область, которую занимают сами границы.

Padding box – область элемента, исключающая границу, но включающая контент элемента и окружающие его отступы – указанные при помощи свойства padding.

Content box – область, созданная контентом элемента, исключающая любые отступы и границы.

Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.

Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin.

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

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

Система координат элемента

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

У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.

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

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

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

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

Например, предположим у вас есть фоновое изображение, применённое к элементу, и вы не задали ему повторение (поэтому применяется только один экземпляр этого изображения). Исходной позицией фонового изображения внутри системы координат будет начальная точка системы координат padding box. Поэтому верхний левый угол изображения позиционируется в верхнем левом углу внутреннего отступа элемента. (См. живой пример ниже.)

К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.

Изображение любезно предоставлено Freepik.com

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

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

Изменение области позиционирования фона и системы координат при помощи

background-origin

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

Оно принимает одно из трёх значений: padding-box (значение по умолчанию), content-box и border-box.

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.

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

Затем, в этой системе координат можно указать положение фонового изображения, используя свойство background-position.

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

Позиционирование фоновых изображений при помощи

background-position

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

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

Углы смещения элемента и система координат в CSS.

В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top, right, bottom, left и center.

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

background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

Если вы укажите только одно значение, то второе будет считаться, как center. Если укажите два значения, то первое будет определять смещение от левого угла — т.е. горизонтальную позицию, а второе – смещение вниз от верхнего угла — вертикальную позицию.

background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */
background-position: top; /* идентично `top center` */
background-position: 50px; /* идентично `50px center` */

Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left — нет, она должна выглядеть так: left 50%. При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.

Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение 0% от левого края, right — смещение 100% от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.

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

Как работают абсолютные значения background-position

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

Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.

Позиционирование фонового изображения при помощи абсолютных значений.

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

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

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

Как работают процентные значения background-position

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

Например, процентное значение 0% 0% выровняет точку 0% 0% изображении с точкой 0% 0% в системе координат области позиционирования фона. Значение 50% 75% свойства background-position выровняет точку, которая находится в 50% от левого и в 75% от верхнего края изображения с точкой, которая расположена на 50% 75% в области позиционирования фона.

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

Позиционирование фонового изображения при помощи процентных значений..

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «background-position Example#2» на CodePen.

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

Смещение относительно любого края

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

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

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

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

background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */

background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */

background-position: left 20px bottom 50px;

Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.

При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background-position: bottom 10px right 20px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.

Чтобы лучше это понять, поиграйтесь со значениями свойства background-position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.

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

Установка размеров, повторение, обрезка изображений и многое другое!

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

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

Кроме того, теперь, помимо основных свойств для фона, есть и дополнительные свойства, которые позволяют применять к фоновым изображениям эффекты наложения, похожие на эффекты, доступные в редакторах типа Photoshop — в частности, свойство background-blend-mode. Если вам интересно изучить всё о наложении в CSS, то можете прочитать об этом в этой статье.

Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.

P.S. Это тоже может быть интересно:

Как сделать веб страницу html с картинкой для чайников

для чайников

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

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

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”. Для этого нам понадобится любой текстовый редактор. Я вам посоветую «Notepad++». Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
«page.html»

И так, открываем наш редактор, и пишем следующий код:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета
</body>
</html>

Сохраняем созданный текст.
Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

Вставить картинку в html страницу

Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
Выбираем нужное изображение, редактируем его либо в документе Word (простой вариант), либо в Photoshop.
Сохраняем картинку в формате JPEG, в нашей папке для создания страниц html.
Пример:
название папки: user_page
в этой папке:
страница: page.html
картинка: kartinka.jpg

Для вставки картинки в страницу применяется тег <img>.
Для указания пути к картинке в теге используется параметр src=
Вот так будет выглядеть код html, при помощи которого можно вставить картинку в страницу html:
<img src=»/kartinka.jpg»> (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета

Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается, сделать html страницу совсем не сложно!

Ниже приведены атрибуты для тега <img>, и их предназначение:

Без атрибутов — текст по умолчанию находится снизу картинки

align=»right» — картинка справа, текст слева

align=»left» — картинка слева, текст обтекает справа

align=»bottom» — как и по умолчанию, текст внизу картинки

align=»middle» — текст посередине картинки

align=»top» — текст вверху картинки

vspace — задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).

hspace — задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

alt — задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись «Сайт для сайтостроителей». Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).

width — задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)

height — задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)

border — задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

<p></p> — размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
align=»left» — слева
align=»center» — в центре
align=»right» — справа

background=»Ваш_фон.jpg»- Ваша картинка будет фоном HTML странички. В атрибуте background=»Ваш_фон.jpg» нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.

Создание в рисунке прозрачных областей. Уроки Adobe Photoshop.

.. или уроки Adobe Photoshop.

Взгляните на рисунок в формате jpg, небезызвестного мультипликационного героя Мамонтёнка который потерял свою маму.. плакать хочется.. нет, не из-за того, что мамонтенок не может найти свою маму (хотя и из-за этого тоже), а потому что синий фон ужасно режет глаза! так и хочется убрать эту синеву и залить фон рисунка таким цветом, чтобы он сливался с фоном страницы..

Думаю для Вас это не проблема! подумаешь открыть его с помощью того же фотошопа и залить фон нужным цветом! но а как быть если основной фон страницы это некая сложная текстура?

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Создание в рисунке прозрачных областей</title>
</head>
<body>
<img src=»mammoth.jpg» alt=»Мамонтёнок»>
</body>
</html>

Открывать фотошоп и рисовать в рисунке с мамонтенком вместо синего фона клеточки? А потом пытаться подогнать их к основному фону страницы? Это не выход!!!

Так вот, докладываю, что графические форматы gif и png — поддерживают режим прозрачности, позволяя тем самым сделать некоторые области рисунка невидимыми человеческому глазу — что нам собственно и нужно!

Теперь по порядку:

1. Откройте рисунок фон которого нужно сделать прозрачным с помощью Adobe Photoshop.

2. Откройте закладку «Изображение» >> «Режим» >> «Индексированные цвета».

3. В появившемся окне-диалоге «Индексированные цвета» ставим галочку «Прозрачность» и нажимаем «ОК»

4. С помощью инструмента выделения «Волшебная палочка» и «Ластика» стираем в рисунке фон, собственно делая нужные нам части прозрачными.

5. Ну и сохраняем нашу картинку в формате gif.. закладка «Файл» >> «Сохранить для Web…» в появившемся окне указываем (соглашаемся), что картинка будет сохранена в формате gif жмем «Сохранить».. выбираем папку пишем имя — всё это Вы, я надеюсь умеете..

Всё картинка с прозрачным фоном создана!!

Теперь её можно снова вставить в нашу страницу, не забыв при этом сменить расширение jpg на gif.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Создание в рисунке прозрачных областей</title>
</head>
<body>
<img src=»mammoth.gif» alt=»Мамонтёнок»>
</body>
</html>

Такие вот дела..

Ускорение загрузки фоновых изображений | Малый бизнес

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

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

Преобразуйте фоновое изображение в формат JPG и сожмите его, чтобы уменьшить его размер. Преобразование фонового изображения PNG в JPG может привести к получению изображения значительно меньшего размера, которое выглядит практически идентичным.Многие бесплатные программы для редактирования изображений, такие как GIMP и Paint.net, могут конвертировать файл PNG в JPG, позволяя выбрать коэффициент сжатия, который уравновешивает размер файла и качество изображения.

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

HTML-документа:

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

Заменить «www.website.com/background.jpg «с URL-адресом желаемого фонового изображения. Если вы хотите использовать фоновое изображение, которое невозможно выложить плиткой, лучше всего использовать CSS для размещения кода для создания изображения в разделе

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

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

Замените «#FFFFFF» шестнадцатеричным кодом желаемого цвета.

Подключайтесь непосредственно к вашему веб-серверу с помощью FTP-клиента, такого как FileZilla. В корневом каталоге HTML — обычно wwwroot или public_html — найдите и загрузите файл ».HTACCESS. «Если вы не видите файл с таким именем, создайте его с помощью Блокнота. Добавьте следующий код в начало файла, прежде чем загружать его обратно на сервер:

Набор заголовков Истекает «Sun, 1 Jan 2017 20:00:00 GMT»

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

Список литературы

Ресурсы

Биография писателя

Джейсон Артман был техническим писателем с тех пор, как начал работать в этой области в 1999 году, когда учился в Университете штата Мичиган.Артман опубликовал множество статей для различных веб-сайтов, охватывающих широкий спектр компьютерных тем, включая оборудование, программное обеспечение, игры и гаджеты.

фоновых изображений | HTML Dog

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

 
тело {
  фон: белый URL (http: // www.htmldog.com/images/bg.gif) без повтора вверху справа; 
}

Это объединяет следующие свойства:

фоновый цвет , с которым мы сталкивались раньше.
background-image , где находится само изображение.
background-repeat , так изображение повторяется. Его значение может быть:
- повтор , эквивалент эффекта «плитки» по всему фону,
- repeat-y , повторение по оси y, вверху и внизу,
- repeat-x (повторение по оси x, рядом) или
- без повтора (показывает только один экземпляр изображения).
background-position , который может быть верхний , центральный , нижний , левый , правый , длина или процентное соотношение или любая разумная комбинация, например верхний правый .

Новый раздел примеров!
Посмотрите на весь этот код в действии и поиграйте с ним.

Неповторяющийся фон в правом верхнем углу.

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

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

Фоновое изображение — Tailwind CSS

Линейные градиенты

Чтобы придать элементу фон с линейным градиентом, используйте одну из утилит bg-gradient- {direction} в сочетании с утилитами остановки цвета градиента.

Адаптивный

Чтобы управлять фоновым изображением элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите фонового изображения. Например, используйте md: bg-gradient-to-r , чтобы применить утилиту bg-gradient-to-r только при средних размерах экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

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

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

Вы можете добавить свои собственные фоновые изображения, отредактировав раздел theme.backgroundImage в файле tailwind.config.js :

 
  module.exports = {
    тема: {
      продлевать: {
        backgroundImage: theme => ({
+ 'hero-pattern': "url ('/ img / hero-pattern.svg ') ",
+ 'footer-texture': "url ('/ img / footer-texture.png')",
        })
      }
    }
  }

Это не обязательно должны быть градиенты — это могут быть любые фоновые изображения, которые вам нужны.

Эти классы будут иметь вид bg- {key} , поэтому, например, hero-pattern превратится в bg-hero-pattern .

Варианты

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

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

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

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ backgroundImage: ['hover', 'focus'],
      }
    }
  }

Кажется, мы не можем найти эту страницу

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}} *

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}}
{{addToCollection.description.length}} / 500

{{l10n_strings.PRODUCTS}}

{{l10n_strings.DRAG_TEXT}}

{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$ select.selected.display}}

Как обрезать изображения (квадрат, круг) в CSS

В этом уроке мы узнаем, как обрезать изображения до квадрата, круга в CSS.

Это пример изображения, над которым мы работаем.

Обрезка изображения до квадрата

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

Пример:

 .myimg {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  объект подходит: крышка;
}

вывод:

Обрезка фонового изображения до квадрата

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

Пример:

  .row {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  background-image: url (https: // images.unsplash.com/photo-1563805042-7684c019e1cb);
  размер фона: обложка;
  background-position: center;
}

Выход:

Если вы не установите background-position по центру, изображение будет выглядеть следующим образом.

Обрезка изображения до круга

Мы можем обрезать изображение до круга, добавив свойство border-radius со значением 50% к квадратному изображению.

Пример:

  .myimg {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  объект подходит: крышка;
  border-radius: 50%;}

Выход:

Точно так же мы можем обрезать фоновое изображение до круга, добавив значение радиуса границы к 50% .

Пример

  .row {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  background-image: url (https://images.unsplash.com/photo-1563805042-7684c019e1cb);
  размер фона: обложка;
  background-position: center;
  border-radius: 50%;}

Как установить фоновое изображение или цвет в Google Docs — Google Docs Tips

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

Как установить цвет фона в google docs? Вы можете быстро изменить или установить цвет фона с помощью следующих 4 шагов.

Откройте документ Google docs, в котором вы хотите установить цвет фона.
Щелкните меню «Файл» -> щелкните «Настройка страницы».
Щелкните раскрывающийся список «Цвет страницы» и выберите нужный цвет в соответствии с вашими требованиями.
Наконец, нажмите кнопку «ОК», чтобы установить желаемый цвет.

Подробно обсудим ниже.

Как установить цвет фона в google docs?

Настроить цвет фона для документа в Google docs очень просто, и это всего лишь несколько шагов.

Щелкните файл> Параметры страницы

Документы Google изменить цвет фона

Откроется всплывающее окно с возможностью выбора ориентации , размера бумаги и цвета страницы .
Щелкните раскрывающееся меню под «Цвет страницы», , расположенное в нижней части левого угла всплывающего окна, выберите нужный цвет из списка цветов.

вставить фоновое изображение в google docs

Google docs Цветовая палитра

Когда вы нажимаете на раскрывающийся вариант цвета страницы, открывается цветовая палитра google docs. Он состоит из множества цветов, что позволяет выбрать один.

как изменить фоновое изображение в google docs

Вы также можете настроить нужный цвет, щелкнув опцию «custom» из цветовой палитры.Это поможет вам использовать определенный оттенок или цвет. Вы также можете вставить цветовой код HTML, чтобы найти нужный вам цвет.

google docs цвет фона

Выбрав цвет, нажмите кнопку «ОК». Вы также можете сделать эту новую нормальную работу, выбрав опцию «Установить по умолчанию».

Как установить изображение за текстом в Google Документах?

К сожалению, нет прямого способа установить изображение за текстом в google docs .

Есть множество вариантов, с помощью которых вы можете вставить изображение в документы Google.Но чтобы добавить фоновое изображение, вы должны следовать опции «Разрыв текста» в маленьком поле, которое появляется под изображением, которое вы вставили в свои документы Google.

После того, как вы вставили изображение, нажмите «Разрыв текста» и отформатируйте его, чтобы ваше изображение находилось позади текста.

Лучший способ — создать два разных «рисунка», для текста и фонового изображения. Затем вы можете выбрать каждый и щелкнуть «Разрыв текста» и переместить один поверх другого.

Как установить фоновое изображение в google docs?

Существует группа параметров для вставки изображения в качестве фона в документы Google.

Задайте фоновое изображение в документах Google с помощью файла Word
Как установить Установите фоновое изображение в документах Google с помощью слайдов Google
Установите фоновое изображение в документах Google с помощью чертежа
Как установить фоновое изображение в документах Google с использованием водяного знака

Установите фоновое изображение в документах Google с помощью файла Word

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

Теперь откройте документ Google Docs .

Нажмите Файл > Открыть
Нажмите «Загрузить» и выберите файл Word на своем устройстве.

как изменить цвет фона в google docs

Щелкните изображение правой кнопкой мыши и выберите «Параметры изображения».

google docs background image

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

могу ли я установить фоновое изображение в документах Google

Как установить фоновое изображение в документах Google с помощью слайдов Google

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

Создайте новую пустую презентацию в Google Slides .

как установить изображение в качестве фона в google docs

Щелкните File > Page Setup
Щелкните Custom. Чтобы презентация выглядела как реальное фоновое изображение в документе Google Docs , установите высоту 11 дюймов и ширину 8,5 дюймов .

google docs установить фоновое изображение

Щелкните Slide > Change Background

background image google docs

Появится диалоговое окно Background .Вы также можете выбрать цвет фона, если хотите. Чтобы установить фоновое изображение, нажмите кнопку «Изображение» .
Просмотрите изображение, которое вы хотите установить в качестве фонового изображения в Google docs, и нажмите «Открыть». После загрузки изображения нажмите «Готово».

google docs изображение за текстом

Если вам нужен один и тот же фон на нескольких слайдах, вы должны загрузить его на каждый из слайдов.

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

После того, как вы создали текст, вы можете загрузить презентацию в формате PDF и загрузить ее в свой google docs .

Шаги по установке фонового изображения в Google docs с помощью чертежей

Щелкните Insert > Drawing > + New .

google doc background image

Область для рисования будет открыта.

Щелкните значок « Image» , чтобы выбрать файл изображения, который вы хотите использовать в качестве фонового изображения.

как добавить фоновое изображение в google docs

Выберите изображение для загрузки со своего компьютера в качестве фонового изображения в google docs .
Теперь щелкните значок «Текстовое поле» , чтобы вставить текст над фоновым изображением в google docs .

как установить изображение в качестве фона в чертеже Google

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

Установите фоновое изображение в документах Google с помощью водяного знака

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

Откройте чертежи Google
Щелкните Вставить> Изображение
Вы можете загрузить изображение со своего персонального компьютера , диска Google, фотографий Google, вставить URL-адрес , мгновенная камера или выполнить поиск с помощью встроенного поиска изображений Google

google docs image background

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

Изменить прозрачность водяного знака в рисунках Google

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

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

После вставки изображения, щелкните правой кнопкой мыши на изображении и выберите «Параметры формата» кнопку.

как сделать фон изображения в документах Google

Это откроет меню параметров формата с правой стороны чертежей Google .

На вкладке «Коррекция» переместите ползунок «Прозрачность» вверх, чтобы уменьшить прозрачность.

Это снизит прозрачность изображения.

добавить фоновое изображение google docs

Ваше изображение водяного знака готово. Теперь назовите это. Он будет автоматически сохранен на вашем диске Google .

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

Щелкните Вставка> Рисунок

Выберите сохраненное изображение Google Drawings с диска google .

Как обернуть изображение в документах Google

Вы также можете обернуть или разбить текст в Google.

Это делает плавающие изображения в google docs .

Документы Google, плавающее изображение

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

Параметр «В строке» обрабатывает изображение как кусок текста. Слова появятся прямо перед изображением и сразу после него.

Как установить картинку в качестве фона в Google Документах?

Второй вариант — «Обтекать текстом» , который будет обтекать текст вокруг вашего изображения.

Как добавить фон в Google Docs

Третий вариант — «Разрыв текста» , при котором текст появляется под и над изображением.

установить изображение в качестве фона google docs

Как изменить цвет одной (отдельной) страницы в google docs?

Документы Google не поддерживают изменение цвета фона отдельной страницы в вашем документе документов Google .

Один из способов сделать это — создать таблицу, состоящую из строки и столбца 1 × 1, и развернуть ячейку, чтобы она поместилась на странице документа.

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

Цвет фона документов Google в таблице

Чтобы изменить цвет фона таблицы, щелкните правой кнопкой мыши в таблице и выберите Свойства таблицы .

изменить фон в google docs

В свойствах таблицы щелкните «цвет фона ячейки» и выберите цвет, соответствующий вашему тексту.

цветовая палитра документов Google

Цвет фона текста документов Google

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

Щелкните текст, для которого нужно добавить цвет фона .
Щелкните вкладку «Выделить» цветов в верхней части документа google docs и выберите нужный цвет фона текста .

Как удалить цвет фона из текста в документах Google

Если ваш контент находится в таблице, перетащите курсор через всю таблицу и выберите Свойства таблицы> Цвет фона ячейки. Измените цвет на белый или нет и нажмите «ОК» , чтобы обновить изменения.
Если вы хотите удалить цвет фона текста в абзаце, просто выделите текст и щелкните Формат> Очистить форматирование , чтобы удалить цвет фона .

Вы также можете использовать ярлык «Ctrl + \» на клавиатуре, чтобы очистить форматирование.

Если вы хотите удалить цвет фона всего документа Google, выберите все, нажав Ctrl + A.

Теперь щелкните вкладку «Цвет выделения» в верхней части документа google docs.

Создание фонового изображения или водяного знака в «Документе» Google

В цветовой палитре выберите цвет «нет» или «белый» .

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

25 потрясающих фонов веб-сайтов и полезных рекомендаций

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

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

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

Но какой из них вам подходит?

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

Основные концепции для фона веб-сайта

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

Фоны с разбивкой: тело и контент

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

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

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

Отзывчивость и удобство использования на фоне веб-сайта

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

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

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

Наконец, всегда предлагайте кнопку паузы для фонового видео.

25 лучших примеров фонов для веб-сайтов

For the Love of Bread — отличный пример черно-белого тематического фона для веб-сайтов. Он отлично привлекает внимание пользователя, и, что лучше всего, вы можете приостановить и воспроизвести фоновое видео в удобное для вас время.

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

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

Сайт

Léonard’s Inventive Agency довольно изобретателен, когда дело касается плавного градиента фона. Нам нравится, как более теплые цвета в верхней части страницы незаметно привлекают внимание к логотипу и меню навигации.

Чуть более заметный градиент есть на веб-сайте портфолио Франса Хулета.Различные участки экрана резко контрастируют, а более светлая часть градиента привлекает внимание к его остроумному пересказу текста.

Superlist — отличный пример смелого, сплошного цвета фона веб-сайта. Выбирая насыщенный фон, superlist умеет красиво размещать свою графику, текст и компоненты на фоне, не поглощая эти элементы.

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

Фон веб-сайта

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

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

I Love Me Wellness придерживается многоуровневого подхода к фону своего веб-сайта, но не традиционным способом. Изображения накладываются на желтый фон содержимого, а текст, параметры навигации и призыв к действию располагаются непосредственно на фоне. И это работает из-за контраста.

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

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

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

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

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

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

The Caffeine Post также сделали выбор в пользу яркого видео-фона, который привлекает пользователя, но при этом обеспечивает приятный контрастный фон для логотипа и их основного CTA. Однако видео можно приостановить для загрузки, если ваше интернет-соединение в какой-то день немного медленное, что подвергает их опасности из-за отказов пользователя.

The Hiring Chain сделали простой и веселый вводный курс на свой веб-сайт. Бежевый фон обеспечивает минималистский контраст для сохранения этой простоты в сочетании с тонким рисунком, перекликающимся с разделом «объявления» в винтажной газете.

Tag Heuer имеет короткое зацикленное видео с повторяющимися изображениями в кадрах, которые помогают сохранить динамичность и интересность страницы, не слишком отвлекая пользователя. Он также красиво контрастирует с текстом, и мы ценим кнопку паузы. Это savoir-faire !

Оверлеи — это то, что делает C8 с фоновым изображением своего веб-сайта. Чтобы не отвлекать внимание от основного содержания на странице, они использовали нечеткое статическое наложение, чтобы слегка затенять изображение, но не затемнять его.Отлично сделано!

Harmony — так называется игра с White Pebble Suites. Фоновое изображение их веб-сайта идеально гармонирует с ощущением веб-сайта, а также подчеркивает их мягкую пастельную цветовую схему. Более того, белый текст, логотип и призывы к действию выделяются на отличном контрасте.

Захватывающий набор фоновых изображений веб-сайта

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

Mafana демонстрирует чудесно созданную серию слоев с узорами, обеспечивающих идеальный фон для начального текста. Это идет на чисто белом фоне всего тела. Единственная проблема с UX, которая у нас есть, заключается в том, что когда вы наводите курсор на левые шаблоны, вас приветствуют призывы к действию с надписью «Go Contact» и «Go Lookbook». «Go» здесь обычно считается избыточным в UX Writing, но это полноценный балл за дизайн фона!

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

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

Места, где можно найти идеальный фон для веб-сайтов

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

Как и Unsplash, изображения в Pexels находятся под лицензией Pexels.Это делает их бесплатными для использования в любых коммерческих или личных проектах, если вы не пытаетесь продавать изображения так, как если бы они были вашими собственными. Справедливо.

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

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

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

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

Платные ресурсы, которые мы (все еще) любим

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

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

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

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

iStock, младший брат Getty images, представляет собой отличный банк изображений для фонов веб-сайтов. Он предлагает миллионы изображений с отметкой о качестве, а также множество иллюстраций и векторных изображений.

Нам нравится, что вы можете использовать кредитную систему (вы платите за кредиты, которые затем позволяют вам получать изображения по мере необходимости) или систему подписки для более стабильного потока изображений (от 10 до 750 изображений в месяц в зависимости от ваших потребностей) .

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

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

Завершение фона веб-сайта

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

Пришло время максимально использовать фон вашего веб-сайта и приступить к визуализации этих красивых визуальных эффектов!

Как сделать изображение фоном в html: Как добавить фоновый рисунок на веб-страницу?

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

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

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

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

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

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

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

Как задать картинку фоном страницы. Самоучитель HTML

Работа с фоном. Фоновое изображение на практике — Вёрстка

Повторение

Позиционирование

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Области боксовой модели CSS

Система координат элемента

Изменение области позиционирования фона и системы координат при помощи

Позиционирование фоновых изображений при помощи

Как работают абсолютные значения background-position

Как работают процентные значения background-position

Смещение относительно любого края

Установка размеров, повторение, обрезка изображений и многое другое!

P.S. Это тоже может быть интересно:

Как сделать веб страницу html с картинкой для чайников

для чайников

Создание в рисунке прозрачных областей. Уроки Adobe Photoshop.

.. или уроки Adobe Photoshop.

Ускорение загрузки фоновых изображений | Малый бизнес

фоновых изображений | HTML Dog

Фоновое изображение — Tailwind CSS

Линейные градиенты

Адаптивный

Настройка

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

Варианты

Кажется, мы не можем найти эту страницу

Как обрезать изображения (квадрат, круг) в CSS

Обрезка изображения до квадрата

Обрезка фонового изображения до квадрата

Обрезка изображения до круга

Как установить фоновое изображение или цвет в Google Docs — Google Docs Tips

25 потрясающих фонов веб-сайтов и полезных рекомендаций

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

Основные концепции для фона веб-сайта

Фоны с разбивкой: тело и контент

Рекомендации для различных типов фона веб-сайта

Фон заголовка веб-сайта

Фоны веб-сайтов в полный рост

Отзывчивость и удобство использования на фоне веб-сайта

25 лучших примеров фонов для веб-сайтов

Места, где можно найти идеальный фон для веб-сайтов

Платные ресурсы, которые мы (все еще) любим

Завершение фона веб-сайта

Добавить комментарий Отменить ответ