Атрибут background | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
<body background="URL">
...
</body>Значения
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Нет.
Аналог CSS
background
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Тег BODY, атрибут background</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body background="images/snow.gif">
...
</body>
</html>УЧЕБНИК HTML для новичков — Фон для web-сайта
Фон для странички
Bgcolor и Background
Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? И, главное, каким образом разместить всю нашу красоту?
Короче, вопросов — множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!
Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!
Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.
Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?
Начнем, с самого простого — bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.
Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:
Листинг 11. Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>
Сохраним наше творение под тем же именем и посмотрим, что получилось:
Я на синем фоне
Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — background.
Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл
Листинг 12. Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=»foto/myfoto01.jpg»>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>
Сохраняем этот файл и смотрим, что у нас получилось
оно — фоновое изображение!
Что ж, с одной стороны, приятно видеть столько умных людей в одном месте, но с другой стороны… ну куда столько??? Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background — он просто взял и размножил исходное изображение, заполнив им весь экран.
Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 476 пикселей. Вот и подберем такое изображение.
Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:
Листинг 13. Файл index.html
<HTML>
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY background=»foto/fonsea.jpg»>
<IMG src=»foto/myfoto01.jpg»>
Ура! Привет мир! Привет люди! Встречайте!
</HTML>
Опять сохраняем и смотрим результат
И вот оно — море! Играет, шумит на просторе…
Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:
Печально я гляжу на это отраженье…
Согласитесь, это совсем не то, что хотелось. Конечно, красота требует жертв, и вы можете спокойно откинуть тех пользователей, чье мнение о разрешении экрана не совпадает с вашим, либо предложить им выбрать настройки, которые вы им укажете. Решать, в конечном счете, только вам.
Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку «без швов». То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.
Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из Интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (
Только не удивляйтесь потом, что точно такой фон вы найдете и на других сайтах. Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело. Тем более это очень увлекательное занятие, от которого просто трудно оторваться.
И этим делом мы сейчас и займемся.
Фоновые рисунки | htmlbook.ru
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым. Далее рассмотрены некоторые аспекты применения фоновых изображений.
Фон на веб-странице
Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега <body>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.
В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background, его и будем использовать в дальнейшем.
Добавление фонового рисунка
Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.
Рис. 1. Фоновая картинка без повторения
Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY, как показано в примере 1.
Пример 1. Фоновый рисунок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background: url(images/target.gif) no-repeat 30px 20px; /* Параметры фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Повторение рисунка
Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.
Рис. 2. Повторение рисунка по вертикали
Рис. 3. Картинка для создания фона
Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью свойства background и его значения repeat-y.
Пример 2. Повторение фона по вертикали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background: #fc0 url(images/hand.png) repeat-y; /* Повторение по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).
Рис. 4. Использование градиента в качестве фона
Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).
Рис. 5. Градиентное изображение для создания фона
В примере 3 показан код HTML для создания градиентного фона.
Пример 3. Повторение фона по горизонтали
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background: url(images/gradient2.png) repeat-x; /* Параметры фона */
text-align: center; /* Выравнивание блока по центру */
}
DIV {
margin: auto; /* Отступы вокруг блока */
width: 75%; /* Ширина блока */
height: 90%; /* Высота блока */
text-align: left; /* Выравнивание текста по левому краю */
padding: 10px; /* Поля вокруг текста */
background: white; /* Цвет фона */
}
</style>
</head>
<body>
<div>
Lorem ipsum...
</div>
</body>
</html>Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.
Добавление рисунка к тексту
С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background, которое применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).
Пример 4. Добавление рисунка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновое изображение</title>
<style type="text/css">
h3 {
background: url(images/book.gif) no-repeat 0 50%; /* Параметры фона */
padding-left: 20px; /* Отступ слева от текста */
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<p>Основной текст</p>
</body>
</html>Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Сдвиг фона позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить свойство padding-left, за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка плюс желаемому отступу между изображением и текстом.
background | htmlbook.ru
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
| 3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
Здесь:
<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background</title>
<style type="text/css">
div {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background: url(images/hand.png) repeat-y #fc0; /* Цвет фона,
путь к фоновому изображению и
повторение фона по вертикали */
}
</style>
</head>
<body>
<div>
Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te
feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
</div>
</body>
</html>Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Пример 2
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
<style>
body {
background: url(images/hand.png) repeat-y,
#fc0 url(images/bg-right.png) repeat-y 100% 0;
}
</style>
</head>
<body>
</body>
</html>
Объектная модель
[window.]document.getElementById(«elementID»).style.background
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Дизайнеры и разработчики знают, что фоны (бекграунды) являются одним из самых важных аспектов дизайна и ощущения веб-страницы. Анимация фона (бекграунда) страницы добавляет визуальный эффект и повышает интерес пользователя.
Также анимированные бекграунды (фоны) используются для выделения функциональных, навигационных элементов сайта.
Поэтому для вашего вдохновения в этой статье собрано 21 великолепный пример эффектов анимации фона сайта.
Sakura
Rain Effect
Interactive mosaic background
Color Changing
Wave Animation
Landscape animation experiment
Floating Cloud Background
Parallax Star background in CSS
Pure CSS3 Gradient Background Animation
Canvas Parallax Skyline
Jquery & CSS3 background
Parallax backgrounds with walk cycle
Misty
Lowpoly Dynamic
Clean Slider With Curved Background
Change background colour with fade animation as you scroll
Ambient
Particles
Scrolling Terrain and Shooting Stars
Crystal Caves
CSS-фонов
CSS-свойства фона используются для определения фоновых эффектов для элементов.
В этих главах вы узнаете о следующих свойствах фона CSS:
- цвет фона
- background-image
- повторение фона
- background-attachment
- background-position
CSS фоновый цвет
Свойство background-color определяет цвет фона элемента.
Пример
Цвет фона страницы устанавливается следующим образом:
цвет кузова {
: светло-синий;
}
В CSS цвет чаще всего задается с помощью:
- правильное название цвета — как «красный»
- шестнадцатеричное значение — как «# ff0000»
- значение RGB — как «rgb (255,0,0)»
Посмотрите на значения цвета CSS для полной список возможных значений цвета.
Прочие элементы
Вы можете установить цвет фона для любых элементов HTML:
Пример
Здесь элементы
и
цвет фона: зеленый;
}
div {
цвет фона: голубой;
}
p {
background-color:
желтый;
}
Непрозрачность / Прозрачность
Свойство opacity определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента, всех его дочерних элементов
наследовать ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере задается прозрачность для цвета фона, а не текста:
Вы узнали из нашей главы о цветах CSS, что вы можете использовать RGB в качестве значения цвета. В дополнение к RGB, Вы можете использовать значение цвета RGB с каналом alpha (RGB A ), которое определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа, ). альфа параметр это число между 0.0 (полностью прозрачный) и 1,0 (полностью непрозрачный).
Совет: Подробнее о цветах RGBA вы узнаете в нашей главе «Цвета CSS».
Пример
div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с 30%
непрозрачность * /
}
,
❮ Стиль Объект
Пример
Стиль фона документа:
document.body.style.background = «# f3f3f3 url (‘img_tree.png’) без права повтора верх «;
Попробуй сам »Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство background устанавливает или возвращает до восьми отдельных фонов свойства, в сокращенной форме.
С помощью этого свойства вы можете установить / вернуть одно или несколько из следующих значений (в любом заказ):
- цвет фона
- фоновое изображение
- фон-повтор
- фон-вложение
- background-position
- фонового размера
- фонового происхождения
- фон-клип
Свойства выше также могут быть установлены с отдельными свойствами стиля.Использование отдельных свойств настоятельно рекомендуется для не продвинутых авторов для лучшего Управляемость.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Недвижимость | |||||
|---|---|---|---|---|---|
| фон | 1.0 | 4,0 | 1,0 | 1,0 | 3,5 |
Примечание: См. Поддержку отдельных браузеров для каждого значения ниже.
Синтаксис
Возвращает свойство фона:
Установите свойство фона:
объект .style.background = «цветное изображение повторить вложение позиции размер исходного клипа | начальный | наследовать »
Значения недвижимости
| Значение | Описание |
|---|---|
| цвет | Устанавливает цвет фона элемента |
| изображение | Устанавливает фоновое изображение для элемента |
| повторить | Устанавливает, как будет повторяться фоновое изображение |
| приложение | Устанавливает, является ли фоновое изображение фиксированным или прокручивается на странице | .
| позиция | Устанавливает начальную позицию фонового изображения |
| размер | Устанавливает размер фонового изображения |
| происхождения | Устанавливает область позиционирования фона |
| клип | Устанавливает область рисования фонового изображения |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читайте о начальной |
| наследуют | Унаследует это свойство от родительского элемента. Читать о наследовать |
Технические детали
| Значение по умолчанию: | прозрачный нет повторной прокрутки 0% 0% auto-padding-box border-box |
|---|---|
| Возвращаемое значение: | Строка, представляющая фон элемента |
| CSS версия | CSS1 + новые свойства в CSS3 |
Дополнительные примеры
Пример
Изменить фон элемента DIV:
документ.getElementById («myDIV»). style.background = «url (‘smiley.gif’) blue repeat-x center»;
Попробуй сам »Пример
Установить цвет фона для документа:
document.body.style.backgroundColor = «red»;
Попробуй сам »Пример
Установить фоновое изображение для документа:
document.body.style.backgroundImage = «url (‘img_tree.png’)»;
Попробуй сам »Пример
Установите фоновое изображение для повторения:
документ.body.style.backgroundRepeat = «repeat-y»;
Попробуй сам »Пример
Установить фиксированное фоновое изображение (не будет прокручиваться):
document.body.style.backgroundAttachment = «fixed»;
Попробуй сам »Пример
Изменить положение фонового изображения:
document.body.style.backgroundPosition = «top right»;
Попробуй сам »Пример
Возвращает значения свойств фона документа:
документ.body.style.background;
Попробуй сам »Связанные страницы
Урок CSS: CSS Background
Урок CSS3: Фоны CSS3
Ссылка CSS: свойство background
❮ Стиль объекта ,
- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Загрузка…
Сайт Фоновый размер изображения — WordPress.com
Полноэкранные изображения, используемые в качестве фона домашней страницы, являются одной из самых больших тенденций в современном веб-дизайне, и на то есть веская причина. Захватывающие образы — это эффективный способ быстро привлечь внимание посетителей, передавая информацию о вашем бренде с минимальным текстом.
Вам интересно, насколько эффективны изображения на самом деле? Сообщения с изображениями обычно показывают на 65 процентов более высокий уровень вовлеченности, чем текстовые сообщения, согласно Inc.
Если вы думаете об использовании полноэкранного фонового изображения на своем веб-сайте, вот пять важных советов, которые следует учитывать, включая размер фонового изображения веб-сайта, выбор изображения и наложение текста.
1. Выберите подходящие, привлекательные изображения
Естественно, выбор изображения является одним из самых трудоемких шагов при реализации полноэкранного фона на вашем сайте. Для эффективного привлечения читателей и передачи информации о вашем бренде выберите интересную и интересную фотографию.
Например, если вы продаете керамику, изображение вашей работы в студии будет лучшим выбором, чем неродственный пейзаж. Точно так же динамическое фото с вами в действии, вероятно, будет более увлекательным, чем простой продуктовый снимок.
Если вам интересно, где найти фоновые изображения, у вас есть несколько вариантов. Лучше всего использовать собственные изображения, так как это обеспечит их актуальность и отсутствие проблем с лицензированием. Тем не менее, вы должны использовать фотографию профессионального уровня, и если у вас ее нет, вы можете просматривать бесплатные сайты с изображениями, такие как Unsplash.
2. Обратите внимание на размер
Одной из самых больших проблем при использовании полноэкранного фонового изображения является его размер. Мало того, что это должны быть правильные размеры, но вы также должны обратить внимание на пропорции, разрешение и размер файла.
По данным Malama Online Marketing, наилучший размер фонового изображения для веб-сайта составляет 1920 x 1080 пикселей, а идеальное соотношение — 16: 9. Точка на дюйм (точек на дюйм) должна быть не менее 72, но вы все равно хотите сохранить как можно меньший размер файла, чтобы минимизировать время загрузки сайта.
Это может показаться конкретным, но использование неправильного размера изображения может привести к пикселизации, искажениям, растяжению и другим проблемам с просмотром.
3. Тщательно продумайте свой оверлей
Большинство людей добавляют текстовые наложения (такие как название своей компании и несколько дополнительных предложений) поверх своих фоновых изображений. Ключи к успешному наложению текста:
- Ограничение текста — Если вы помещаете длинный абзац текста поверх фонового изображения, вы отвлекаете внимание от визуального.Сделайте свой текст коротким и приятным, так как у вас есть остальная часть вашего сайта, чтобы вдаваться в подробности.
- Обеспечение читабельности — Блог Grafix Artist предлагает полезные стратегии для эффективного отображения текста поверх фоновых изображений. В целом, все сводится к правильному расположению и соответствующему контрасту, чтобы слова легко читались.
4. Тест на разных браузерах
Скорее всего, вы всегда используете ваш любимый веб-браузер при работе на вашем сайте.Но прежде чем завершить реализацию фонового изображения, важно протестировать свой дизайн в разных браузерах.
Если вы используете, например, Chrome, убедитесь, что изображение также загружается и отображается правильно при использовании Safari, Firefox и Edge. Вы также должны просмотреть свой фон на смартфоне и планшете, чтобы точно определить любые проблемы с мобильным дисплеем.
5. Убедитесь, что ваш сайт может работать самостоятельно
Наконец, важно спланировать наихудший сценарий: если ваше изображение не загружается.Даже если вы все делаете правильно, изображения могут не загружаться из-за проблем передачи, хостинга и других неконтролируемых обстоятельств.
По этой причине ваш веб-сайт должен иметь возможность работать самостоятельно, даже если изображение отсутствует. Не полагайтесь на одну фотографию, чтобы нести весь ваш сайт!
Нужно найти привлекательное изображение для вашего нового сайта? Посмотрите видео ниже и узнайте, как получить бесплатную профессиональную фотографию через WordPress.com:
,