Информационный портал, новости IT, советы, трюки, секреты!

Как задать фоновое изображение, цвета, позиционирование фонового изображения и выравнивание?

Расчитать стоимость сайта

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

Итак, для того, чтобы задать цвет фона определенного элемента веб-страницы, необходимо использовать теги 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 (фиксированное положение на странице).

На этом все! Попробуйте самостоятельно применить данные функции в вашей работе.

Просмотров: 3666

Оцените статью: 1 2 3 4 5

Похожие статьи

Похожие вопросы

Комментарии

Комментарий добавил(а): Тимур
Дата: 2012-01-31

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




Вы не можете добавлять коментарии

Введите  код  с  картинки

=
=