Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

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

.

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

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

Повторяющееся изображение

В CSS-файле можно добавить свойство background-image и установить его значение:

А вот HTML-код, связанный с этим правилом стилей:

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

Рис. 5.22. Фоновое изображение облаков периодически повторяется, заполняя свободное пространство

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

Рис. 5.23. Отображение фонового цвета вместо фонового рисунка

.

Читайте так же:
Not found