• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Как поменять фон страницы... (или поставить фоновую картинку)
Как поменять фон страницы...
XemorDioДата: Четверг, 31.03.2016, 15:31 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: 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-раздел » Скачать скрипты для сталкера » Как поменять фон страницы... (или поставить фоновую картинку)
    • Страница 1 из 1
    • 1
    Поиск:
    Поделись с другими сталкерами
    Меню сайта
    Гость
    Статистика
    Интеллектуальный каталог ресурсов интернет