Rambler's Top100

Оформление фона страницы в
CSS

Фон страницы может быть либо с заданным цветом, либо залит фоновой картинкой, так же при применении фоновой картинки можно одновременно задавать странице и фоновый цвет. Так же фон может прокручиваться вместе с содержимым страницы, а может оставаться неподвижным, то есть зафиксированным, прокручивваться будет только содержимое страницы

В таблице css для обозначения и управления фоном применяются следующие значения:

background-color - этим свойством задаётся фоновый цвет страницы, пишем в файле CSS:

BODY {
background-color : #D0FF00;
}


Страница будет того цвета, который вы ей зададите, в нашем примере cтраница будет выглядеть так

background-image - этим свойством применяется фоновая картинка.Фон страницы можно задать не только цветом, но и любой картинкой, даже совсем маленькой, например есть картинка всего 32 х 32 пикс. в файле CSS напишем:

BODY {
background-image : url(images/6.jpg) ;
}


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

Так же можно картинку тиражировать только по вертикали слева или справа, и по горизонтали сверху или снизу, как будет тиражироваться та или иная картинка применяется свойство background-repeat имеет 4 следующих значения:

   no-repeat; - картинка не будет тиражироваться
   repeat-y; - картинка тиражируется по вертикали
   repeat-x; - картинка тиражируется только по горизонтали
  repeat; - тиражируется по вертикали и горизонтали (значение по умолчанию, даже если это свойство не будет указано, картинка растиражируется и по горизонтали и по вертикали)

Например такую маленькую картинку растиражируем вертикально и зададим фоновый цвет страницы соответствующий одному из квадратиков картинки, в файле CSS будет такая запись:
BODY {
background-color : #5588EE;
background-image : url(../images/large_5.jpg) ;
Background-repeat: repeat-y;
}

По умолчанию наша картинка растиражировалась вертикально слева и на данном этапе будет такой

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

BODY {
background-color : #41818D;
background-image : url(images/bg.jpg) ;
background-repeat: no-repeat;
}

В этом случае картинка расположилась по умолчанию слева и узор не совсем посредине, так как мы не указали, как будет позиционировать картинка, для позиционирования картинок в CSS применяется свойство
background-position - этим свойством задаётся позиция фоновой картинки,позиционирование можно указывать:

В процентах
background-position: 65% 35%;

В пикселях
background-position: 200px; 150px;

Текстом: left-слева, right-справа, center- в центре,top-верх, bottom-низ
background-position: top left;

background-position: top right;

background-position: center;

background-position: bottom;

Добавляем в код css свойство background-position

BODY {
background-color : #41818D;
background-image : url(images/bg.jpg) ;
background-repeat: no-repeat;
background-position: center;
}

Теперь страница будет выглядеть так (Откроется в новой вкладке)

background-attachment - это свойство указывает будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет неподвижна, имеет два значения:

FIXED - фон завиксирован и не прокручивается с содержимым страницы
SCROLL - фон прокручивается

В коде будет так:
BODY {
background-color : #41818D;
background-image : url(images/bg.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed ;
}

Страница будет такой (Откроется в новой вкладке, прокрутите страницу вверх, вниз)

 

 

Rambler's Top100 Яндекс цитирования