Sunday 22 February 2009

Делаем фоновое изображение

Делаем фоновое изображение с помощью CSS. Через "Макет - Изменить HTML" задать правило для body.

Ищем ищем часть кода body. Выглядит примерно так:
body {
  /* что то там */

}

забрасываем фоновую картинку:
body {
  background:url('http://your_url.com/image.gif');
}

http://your_url.com/image.gif заменить своей картинкой.

Это если кратко -если подробнее.
background: background-attachment || background-color || background-
image || background-position || background-repeat

background-attachment -- бывает два [fixed | scroll]
  fixed - при прокрутке окна остается неподвижным
  scroll - изображение прокручивается вместе с содержимым окна

background-color -- цвет фона.
  Может быть задан по названию цвета (например: red, green, blue);
  16-ричным значением (#FF0000, #00FF00, #0000FF);
  RGB значением. Например: rgb(255,0,0)

background-image -- url изображения.
  у нас: url('http://your_url.com/image.gif')

background-position -- позиция фонового изображения.
  Прописываеться по разному, в процентах, с
помощью ключевых слов в порядке "горизонталь вертикаль": [left |
center | right] || [top | center | bottom] (Например left top)

background-repeat -- отвечает за "повторение" фонового изображения.
  no-repeat -- изображение отображается один раз, не повторяется
  repeat-x -- повторяется по горизонтали
  repeat-y -- повторяется по вертикали
  repeat -- повторяется по обоим направлениям X и Y. 
  

  Оп ещё надо всегда задавать альтернативу -если у пользователя незагрузилась картинка !

Пример:
  background: fixed #F8D8D6 url('http://your_url.com/image.gif') left
top repeat-y; 
 

3 comments:

  1. Спасибо за полезный советы)
    Поставил новый фон все работает отлично.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Спасибо, хорошая информация, особенно понравилось то что прекрасный расписной

    ReplyDelete