Страница 1 из 11
Форум » Web дизайн » Ucoz » Как поменять фон страницы... (или поставить фоновую картинку)
Как поменять фон страницы...
Reddy Дата: Воскресенье, 07.11.2010, 21:34 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
А ведь действительно - как? У начинающих веб-дизайнеров, для кого сайт на Юкозе стал первой пробой на пути сайтостроительства, данный вопрос становиться одним из первоочередных. И многие пытаются менять цвет непосредственно через HTML, напрочь забывая (или не зная) о таком великолепной штуке, как таблица стилей (CSS).

Ведь чтобы поменять значение цвета посредством HTML нужно обновить код на всех (!) страницах Вашего сайта, в то время как CSS, собственно, и задаёт правила отображения для всех страниц сайта, которые к ней привязаны.

Так с чего же начать? Во первых - убедиться, что к тегу BODY не привязан никакой стиль или цвет. Т.е. он должен выглядеть так:

Code
<body>


Если же он имеет такой вид:

Code
<body style="background: #691400; margin:0px; padding:0px;">


то с помощью быстрой замены удаляем данный фрагмент:

Quote
background: #691400;


Так же может попасться и такой вариант:

Code
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="15" marginwidth="0" marginheight="0" style="padding:5px;">


тут необходимо убрать следующее:

Code
bgcolor="#FFFFFF"


Теперь переходим непосредственно к таблице стилей (Управление дизайном --> Таблица стилей (CSS)), а уже в ней - наш селектор body:

Code
body {background:#0d024e;margin:0;padding:0;}


на некоторых шаблонах он может быть привязан к селектору td

Code
td, body {font-family:Verdana,Arial,Helvetica; font-size:11px;}


тут необходимо "отвязать" их друг от друга:

Code
body {font-family:Verdana,Arial,Helvetica; font-size:11px;}
td {font-family:Verdana,Arial,Helvetica; font-size:11px;}


Для примера рассмотрим такой вариант - нам нужен чёрный фон. Есть три варианта как это сделать (здесь и далее другие свойства и значения опущены для удобства):

Code
body {background: #000000;}

Code
body {background: RGB(0, 0, 0);}

Code
body {background: black;}


т.е. в CSS допустимо прописывать шестнадцатеричное значение, значение в RGB, или по названию цвета.

А если мы хотим поставить картинку? И чтобы она не повторялась и не двигалась, когда мы прокручиваем страницу? И была строго по центру...

Code
body {background: #3f3f3f url('/img/back.jpg') center center fixed no-repeat;}


Сложновато, неправда ли? Но на самом деле всё не так страшно:
  • Первый параметр, как и в предыдущем случае, задаёт цвет фона.
    стоит указать его, даже если задана фоновая картинка.

  • Второй - путь к картинке фона url('путь')

  • Третий и четвёртый - позиционирование фоновой картинки по горизонтали и вертикали соответственно.
    для первого допустимо задать одно из значений:

    left - от левого края
    center - по центру
    right - пот правой стороны

    для второго:

    top - от верхнего края
    center - по центру
    bottom - от нижнего края

    для обоих можно прописать проценты или значение в пикселях.

  • Пятый устанавливает, будет ли прокручиваться\фиксироваться фоновая картинка.

    fixed - фиксирует изображение
    scroll - позволяет перемещаться фоновому изображению при прокрутке страницы

  • Шестой - отмена повторения фонового изображение по вертикали и горизонтали.

    no-repeat - одно фоновое изображение, без повторений.
    repeat - фоновое изображение повторяется по горизонтали и вертикали.
    repeat-x - фоновый рисунок повторяется только по горизонтали.
    repeat-y - фоновый рисунок повторяется только по вертикали.

    Любое из значений может быть убрано (кроме фоновой картинки, естественно) на Ваше усмотрение. :)

  • спец по кнопачкам
     
    Форум » Web дизайн » Ucoz » Как поменять фон страницы... (или поставить фоновую картинку)
    Страница 1 из 11
    Поиск:
    Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
    Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

    © 2010-2017 Other Side | Хостинг от uCoz