Тег стиля элнементов : background , background-color , background-image , background-repeat , background-attachment , background-position .

Главная страница сайта .

Тег стиля - background , background-color , background-image ,
background-repeat , background-attachment , background-position

Тег стиля элнементов : background , background-color , background-image , background-repeat , background-attachment , background-position

Примеры , подробности , детали

Пример применения тега : background: #ddf url('favicon30.gif') no-repeat scroll center center;" .

В случае применения стиля repeat-y , значение расположения фона по вертикали ( top , center , bottom , равно и любые числовые значения ) не применяется к изображению фона .

Примеры равнозначного по результату написания тега : background: #ddf url('favicon30.gif') repeat-y fixed center top;" background: #ddf url('favicon30.gif') repeat-y fixed center center;" background: #ddf url('favicon30.gif') repeat-y fixed center bottom;" background: #ddf url('favicon30.gif') repeat-y fixed center 50%;"

В случае применения стиля repeat-x , значение расположения фона по гориpонтали ( left , center , rifght , равно и любые числовые значения ) не применяется к изображению фона .

Примеры равнозначного по результату написания тега : background: #ddf url('favicon30.gif') repeat-x fixed left center;" background: #ddf url('favicon30.gif') repeat-x fixed center center;" background: #ddf url('favicon30.gif') repeat-x fixed right center;" background: #ddf url('favicon30.gif') repeat-x fixed 20px center;"

В случае применения стиля repeat , значение расположения фона по гориpонтали и вертикали ( left , center , rifght , top , bottom , равно и любые числовые значения ) не применяется к изображению фона .

Примеры равнозначного по результату написания тега : background: #ddf url('favicon30.gif') repeat fixed left 50%;" background: #ddf url('favicon30.gif') repeat fixed 30pc center;" background: #ddf url('favicon30.gif') repeat fixed right 4em;" background: #ddf url('favicon30.gif') repeat fixed 20px bottom;"

Тег стиля - background-color

Tег задающий цвет фона элемента в стилях которого он прописан .

Может применяться отдельно независимо от наличия остальных тегов background-XXXXX .
Значение по умолчанию - inherit .
Варианты написания отдельного тега для одного и того же цвета в составе стиля элемента HTML :

style="background-color: #ff00ff;" - ( количество оттенков цвета - 16 777 216 . ) style="background-color: #f0f;" - ( количество оттенков цвета - 256 . ) style="background-color: rgb(255,0,255);" - ( количество оттенков цвета - 16 777 216 . ) style="background-color: fuchsia;" - ( количество оттенков цвета - более 150 . ) style="background-color: transparent;" - ( " прозрачность " , отсутствие цвета . ) style="background-color: inherit;" - ( цвет родительского элемента . )

Пример применения тега : background-color: #ff00ff;" ( #f0f; , rgb(255,0,255); , fuchsia;) .

Пример применения тега : background-color: inherit;" ( transparent )

Тег стиля - background-image

Tег задающий изображение в качестве фона элемента в стилях которого он прописан .

Форматы изображений применимых для изображений в качестве фона : JPG , PNG , GIF , BMP . Не рекомендуется применение формата BMP из за большого размера файлов изображений . Применение формата BMP оправдано если требуется изображение фона высокого качества без потерь мелких деталей . По умолчанию , если не указаны координаты местоположения фона , построение фона из изображения , начинается с левого верхнего угла элемента .
Отсутствие тега background-repeat по умолчанию подразумевает значение тега background-repeat: repeat;" .
По умолчанию , без применения других тегов , изображение заполняет всю площадь элемента для которого прописан данный тег . Может применяться отдельно , независимо от наличия остальных тегов .
Значения по умолчанию : none; .
Написание тега в составе стиля элемента HTML :

style="background-image: url('icon.jpg');" style="background-image: none;"

Пример применения тега : background-image: url('favicon30.gif');" .

Пример применения тега : background-image: url('favicon30.gif');" совместно с тегом background-color: #ff00ff;"

Тег стиля - background-position

Tег задающий позицию изображения фона заданного в теге background-image по вертикали и горизонтали .

Может применяться только совместно с тегом background-image;
Значение по умолчанию - left top; ( 0px 0px;) .
Варианты написания тега в составе стиля элемента HTML :

style="background-position: left top;" - ( текстовое обозначение координат положения фона . ) style="background-position: 0px 0px;"- ( числовое обозначение координат положения фона . )

Для текстового выражения положения координат положения фона допустимы следующие текстовые выражения : left , center , right , top , bottom .
Для определения положения фона в числовом выражении допустимы следующие еденицы выражения значений : px , pt , in , cm , mm , pc , em , ex , % . Возможно комбинирование применение обоих вариантов выражения координат положения изображения фона . Отсчёт координат при применении числовх значений производится от верхнего левого угла элемента в котором прописан тег фона , возможно применение отрицательных величин .

Пример применения тега : background-position: left top;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: center top;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: right top;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: left center;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: center center;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: right center;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: left bottom;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: center bottom;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: right bottom;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: 10em bottom;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-position: 75% 43%;" совместно с тегом background-image: url('favicon30.gif');" .

Тег стиля - background-repeat

Tег задающий повтор изображения фона заданного в теге background-image .

Может применяться только совместно с тегом background-image; .
Значение по умолчанию - repeat .
Варианты написания тега в составе стиля элемента HTML :

style="background-repeat: no-repeat;" - ( изображение фона без повторов в единственном числе . ) style="background-repeat: repeat;" - ( повтор по всей площади элемента до полного заполнения . ) style="background-repeat: repeat-y;" - ( повтор изображения только по вертикальной оси элемента в одну колонку . ) style="background-repeat: repeat-x;" - ( повтор изображения только по горизонтальной оси элемента в одну строку . )

Пример применения тега : background-repeat: no-repeat;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-repeat: repeat;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-repeat: repeat-y;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-repeat: repeat-x;" совместно с тегом background-image: url('favicon30.gif');" .

Тег стиля - background-attachment

Tег задающий фиксацию изображения фона заданного в теге background-image относительно окна обозревателя .

Может применяться только совместно с тегом background-image;
Значение по умолчанию - scroll .
Варианты написания тега в составе стиля элемента HTML :

style="background-attachmen: fixed;" - ( изображение фона зафиксировано относительно окна обозревателя неподвижно . ) style="background-attachmen: scroll;" - ( изображение фона зафиксировано относительно окна обозревателя . ) При перемещении страницы слайдером по вертикали фоновое изображение остаётся неподвижным относительно окна обозревателя .

Пример применения тега : background-attachment: fixed;" совместно с тегом background-image: url('favicon30.gif');" .

Пример применения тега : background-attachment: scroll;" совместно с тегом background-image: url('favicon30.gif');" .