Фоны придают вашему веб-сайту индивидуальность и стиль, если они используются правильно, но они могут сильно отвлекать при неправильном использовании. Для фона следует придерживаться двух основных принципов дизайна; фон должен загружаться быстро, и он должен дополнять, а не поддерживать дизайн вашего сайта.
Основы фона
Фон берется из нескольких источников, но, как правило, это цвета, фотографии, графика или иллюстрации. Фоны также можно анимировать, хотя это встречается реже .
Хотя использование большого изображения в качестве фона стало общепринятой практикой, важно помнить, что при создании фонового изображения его следует сжимать, чтобы сделать его как можно светлее. Часто это достигается простым использованием параметра типа «экспорт для Интернета» в программном обеспечении для редактирования изображений.
Цветные фоны
Если вам нужно только изменить цвет фона, а не размещать там изображение, вы можете управлять изображением с помощью таблицы стилей CSS.
Изменение цвета фона в CSS
Поместите этот код в свою таблицу стилей, чтобы изменить цвет фона вашей страницы. Не забудьте использовать цвет фона и цвет текста с достаточным контрастом, чтобы текст всегда легко читался.
тело {
цвет фона: желтый;
}
Или вы можете использовать шестнадцатеричный код, если хотите.
body {
фоновый цвет:#FFFF00;
}
Если вам нужно переопределить таблицу стилей для конкретной страницы, используйте встроенное кодирование.
<body style=»background-color:желтый;»>
Изменение цвета фона в HTML
С появлением HTML5 возможность изменить цвет внутри HTML-тега с помощью атрибута bgcolor больше не доступна. Это изменение отражает стремление использовать CSS для управления всеми стилями HTML.
До реализации HTML5 вы могли изменить цвет страницы следующим образом:
<тело bgcolor=»#FFFF00″>
Хотя этот метод по-прежнему работает для старых браузеров, код в конечном итоге не будет отображаться, поскольку пользователи продолжают обновляться до более новых браузеров.
Веб-безопасные цвета
В первые годы существования Интернета дизайнеры придерживались практики использования только веб-безопасных цветов, потому что эти цвета отображались одинаково на всех мониторах. Многие из современных мониторов могут отображать миллионы цветов , но не все они одинаково отображают 216-цветную палитру небезопасных для Интернета цветов. Поэтому, если вас это беспокоит, все же безопаснее использовать веб-безопасную палитру, если вам нужно, чтобы ваши цвета были как можно ближе к тому, что вы разработали, и одинаково отображались в браузерах и на устройствах.
Фоны из изображений
Чтобы включить фоновое изображение, вам нужно будет управлять одним или несколькими различными описаниями, связанными со свойством фона. К ним относятся:
- Цвет фона — управляет цветом фона, который будет использоваться.
- Background-position — управляет положением изображения.
- Background-size — управляет размером фонового изображения (введено в CSS3).
- Background-repeat — указывает, как повторять изображение по вертикали, горизонтали или в обоих направлениях.
- Background-origin — управляет областью позиционирования изображения (введено в CSS3).
- Background-clip — определяет область рисования фонового изображения (введено в CSS3).
- Background-attachment — контролирует, прокручивается ли изображение или фиксируется
- Фоновое изображение — определяет изображения, которые будут использоваться.
Вообще говоря, вы будете использовать изображения, повторы и описания позиций чаще всего. Однако рекомендуется также объявить цвет с описанием цвета фона на случай, если фоновое изображение не загрузится.
Использование небольших изображений для создания узора
Мозаика изображения — распространенный метод создания фона веб-сайта . Этот метод создает фон, повторяя изображение по горизонтали, вертикали или как по горизонтали, так и по вертикали. Распространенными причинами использования этого подхода являются создание текстуры, создание линий и теней или добавление глубины странице.
При использовании CSS эти атрибуты background-repeat будут размещать ваше изображение в виде мозаики:
- Repeat-x для повторения изображения по горизонтали
- Repeat-y для повторения изображения по вертикали
- Повторить, чтобы повторить изображение как по горизонтали, так и по вертикали
- No-repeat, чтобы избежать повторения изображения
Кодирование вашей таблицы стилей будет выглядеть примерно так:
div.bgClass {
background-image:url(«images/my_background.png»); // это изображение, которое вы хотите повторить
background-position:left top; // это помещает первый экземпляр изображения в верхний левый угол
background-repeat:repeat-x; // это заставляет изображение повторяться слева направо
}
Вы также можете объявить все фоновые атрибуты в одном выражении:
div.bgClass {
background: url(‘images/my_background.png’) repeat-x вверху слева;
}
Использование больших изображений в качестве фона
Когда большие изображения впервые размещались на веб-страницах, обычной практикой было разрезать изображение на мелкие части, чтобы оно быстрее появлялось на странице. Однако эта практика больше не считается лучшим подходом, поскольку каждое соединение изображений представляет собой вызов на сервер . В целом, эти многочисленные вызовы замедляют работу вашего сайта. Если вы используете большое изображение, просто сожмите его до наименьшего возможного размера, чтобы сохранить четкость изображения.
Одной из популярных тенденций является использование одной большой фотографии, часто по центру, в качестве фонового изображения. Это создает мощный и интригующий вид сайта, при условии, что изображение не перекрывает страницу. Изображения, размытые или сфокусированные, становятся фоном контента и привлекают пользователя, если они правильно оформлены. Сайты, которые преуспели в этом виде, как правило, используют изображения, которые имеют естественное «открытие» для текста.
Чтобы поместить одно изображение в качестве фона, поместите его в свою таблицу стилей:
div.bgClass {
background-image:url(«images/my_background.png»);
цвет фона:#FF0000; // вы всегда должны указывать цвет, если изображение недоступно
}
CSS3 позволяет использовать несколько изображений для фона:
div.bgClass {
background-image:url(«images/my_background.png»), url(«images/my_second_background.png»); //просто разделите фон запятой
background-color:white;
}
Предыстория Что можно и чего нельзя делать
Вот несколько советов по созданию отличных фонов.
Что делать
- Держите изображения светлыми; обычно это означает 10 КБ или меньше для фона, 60 КБ для заголовков и 100 КБ для высококачественных изображений.
- Используйте фоновые изображения/графику, которые дополняют дизайн.
- Убедитесь, что ваше изображение/дизайн подходит для больших экранов.
Не
- Не создавайте беспорядок, используя «занятый» фон.
- Не полагайтесь на фон, чтобы нести дизайн сайта.
- Не уменьшайте цветовой контраст до такой степени, что текст становится трудночитаемым.
Время загрузки имеет значение
Мобильные устройства еще больше изменили игровую площадку, когда дело доходит до фоновых изображений. Пользователи, привыкшие к высокоскоростному интернет-соединению, несколько нетерпеливы при загрузке контента в гораздо более медленных сетях 3G или 4G. Высокоскоростной Интернет может достигать скорости 15 Мбит/с и более по сравнению с примерно 10 Мбит/с для 4G и менее 4 Мбит/с для 3G . Поэтому, когда вы разрабатываете сайт, создайте версию только для мобильных устройств или убедитесь, что ваши изображения, фон и другие функции достаточно легкие для быстрой загрузки.