Как задать фоновое изображение, цвета, позиционирование фонового изображения и выравнивание?
Элементы веб-страницы могут быть украшены фоновыми цветами и фоновыми изображениями, которые можно определить с помощью простых атрибутов.
Указание цвета
Итак, для того, чтобы задать цвет фона определенного элемента веб-страницы, необходимо использовать теги background-color или background-image. В качестве значения атрибута background-color указывается цвет. Например, body {background-color:green;}. В этом случае фон веб-страницы будет полностью окрашен в зеленый цвет.
Указание ссылки
Для атрибута background-image необходимо указать ссылку (относительную или абсолютную) на картинку, которая будет в качестве фона страницы. Пример: body {background-image: url(foto.jpg);}. Ссылка относительная.
Управление фоновым изображением
Давайте подробнее опишем те функции, которые можно применить к фоновому изображению.
- Фоновое изображение может повторяться. За это отвечает атрибут background-repeat, который может принимать значения: repeat (повторять), repeat-x (повторять по горизонтали), repeat-y (повторять по вертикали), no-repeat (не повторять).
- Фоновое изображение можно расположить в любом месте веб-страницы. В этом нам поможет атрибут background-position. В зависимости от значения этого атрибута, изображение может быть выровнено по левому краю (left), по правому краю (right), по верхнему краю (top), по нижнему краю (bottom) и по центру (center).
- Можно задать собственные координаты расположения фонового изображения. Например, body {background-position: 50% 50%; background-image: url(foto.jpg);}. Первая координата указывает на X, а вторая на Y. Значения координат можно задавать абсолютными или относительными.
- Последняя функция, про которую я вам расскажу - background-attachment. Данный атрибут отвечает за прокрутку фонового изображения. Соответственно, он может принимать два значения: scroll(прокрутка) или fixed (фиксированное положение на странице).
На этом все! Попробуйте самостоятельно применить данные функции в вашей работе.
- Читайте также:
- Как сделать фон фотографии размытым?
- Преимущества использования каскадных таблиц стилей (CSS) при создании сайта
Просмотров: 7427
Похожие статьи
Комментарии
Написать комментарий
Облако тегов
- AdSense
- CMS
- CSS
- Chrome
- Dmoz
- Drupal
- Evernote
- Firefox
- ICQ
- Joomla
- Linux
- Mac OS X
- Microsoft
- Photoshop
- Sape
- Skype
- Telegram
- WebMoney
- Windows
- YouTube
- html
- iOS
- iPad
- iPhone iPad
- Антивирусные программы
- Аудит
- Блог
- Видео
- Графика
- Дизайн
- Домен
- Заработок в Интернет
- Игры
- Индексация
- Интернет магазин
- Интернет-реклама
- Конверсия
- Контекстная реклама
- Контент
- Метрика
- Мобильные приложения
- Настройка компьютера
- Облачные сервисы
- Онлайн сервисы
- Перелинковка
- Поведенческие факторы
- Поисковые запросы
- Почта Яндекс
- Роботы
- Семантическое ядро
- Спам
- Ссылки
- Статистика
- Текст
- Траст
- Трафик
- Фильтры Яндекс
- Форматы
- Хостинг
- Электронные книги
- Юзабилити
- Яндекс
- Яндекс.Деньги
Комментарий добавил(а): Тимур
Дата: 2012-01-31
Нужные и полезные сведения для новичков, которые решили создать свой собственный сайт. Написано все понятно, поэтому у каждого должно получиться.