background

Все о фоне! Расскажу как поставить вон в разные места экрана ,как сделать сто бы он двигался с движением страницы и т.д.
1.background-attachment
2.background-color
3.background-image
4.background-position
5.background-repeat
1.background-attachment
Этот парамерт устанавливает ,будет ли прокручиваться фон вместе с содержимым.(зафиксированно,неподвижно или перемещаться совместно с документом.
{background-attachment:scroll;(позволяет перемещаться фону вместе с содержимим)
background-attachment: fixed(фон неподвижен}

2.background-color
Устанавливает цвет фона.Браузеры поддерживают некоторые цвета по их названию.Но лучше шестизначный код (#000000).Есть еще система RGB.ОНа использует значения крассных,зеленых и синих цветов.(значение каждого из твох цветов может принимать значения от 0 до 255)
Еще есть transparent, устанавливающий прозрачный фон.
{background-color: #3366CC;(шестиизначная система) background-color: RGB(249, 201, 16);(RGB) background-color: maroon;}(название цвета)

3.background-color
Устанавливает изображение как фон.
{ background-image: url(ссылка на изображение) ;}

4.background-color
Устанавливает положение фонового изображения. Может указываться в процентах(но я бы посоветовала следующий вариант,он более понятный). Так же можно устаовить расположение фонового изображения с помощью left,center,right,top,bottom.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.


{ background-position: left bottom ; background-position: 0% 100% }

5.background-color
Определяет будет ли повторяться изображение и по какой оси.Без повторения - no-repeat, с повторением по оси X - repeat-x ,по оси Y - repeat-y, повторяющиееся по двум осям - repeat.
{ background-repeat: no-repeat;(без повторений) background-repeat: repeat-x;(по оси X) background-repeat: repeat-y;(по оси Y) background-repeat: repeat;}(по двум осям)

back refresh main