Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Все о фоне для сайта в CSS.

Viktor | 24.02.2014 | нет комментариев

Фон на сайте из картинки.

В третьем уроке “Работаем с фоном сайта” мы с Вами научились с помощью CSS задавать фон сайта просто цветом (в шестнадцатеричном значении) и задавать фон сайта с помощью фонового изображения. Напомню что задать фоновый цвет на Web-странице мы можем так:

Листинг 10.1.

body { background-color: #0С3445; }

Задать фоновое изображение на странице мы можем так:

Листинг 10.2.

body { background-image: url(bg.jpg); }

Не буду повторятся, более подробнее посмотрите здесь. Сегодня мы будем говорить о других свойствах, которые могут понадобиться при задании фонового изображения, поэтому все же рекомендую повторить 3-й урок.

Как Вы помните фоновое изображение на web-странице просто повторяется (тиражируется) по горизонтали – Х и по вертикали – Y . Т.е. графический файлик bg.jpg размером 50х50 px , тиражируясь по горизонтали и вертикали равномерно закрывает всю web-страницу создавая эффект единого фона. Для того чтобы задать тиражирования только по какому то одному направлению или исключить тиражирование, применяется свойство background-repeat: с атрибутами:

  • repeat-y; – тиражировать только по вертикали;
  • repeat-x; – тиражировать только по горизонтали;
  • repeat-no; – не тиражировать.

Например мы хотим что бы изображение bg.jpg было растиражировано только по вертикали (сверху вниз) , напомню что по умолчанию тиражирование происходит из верхнего, левого угла, тогда мы создаем такой стиль:

Листинг 10.3.

body { background-image: url(bg.jpg);
background-repeat: repeat-y;
}

В результате наш квадратик 50х50 px растянется вдоль всей web-страницы с левой стороны.

Мы можем указать браузеру откуда тиражировать наше изображение, для этого служит свойство background-position: и его атрибуты:

  • top; – тиражировать сверху;
  • right; – тиражировать справа;
  • bottom; – тиражировать снизу;
  • left; – тиражировать слева.

Например нам нужно чтобы наш файлик bg.jpg тиражировался справа, сверху вниз, тогда код будет выглядеть так:

Листинг 10.4.

body { background-image: url(bg.jpg);
background-repeat: repeat-y;
background-position: top right;
}

C помощью этого же свойства background-position: мы можем указать конкретное место размещения графического файла на web-странице:

Листинг 10.5.

body { background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: 70px 300px;
}

Что мы здесь написали? Давайте “переведем на русский язык”: файл bg.jpg , не повторять , разместить на web-странице в 70px от левого края и в 300px от верхнего края. Т.е. у нас будет висеть одиночная картинка в указанном месте.

Теперь раз уж мы разместили в произвольном месте картинку (графический файл) как Вы помните из преведущих наших уроков к этой картинке изображение начнет “прилипать” надо задать отступ от изображения. Это мы можем сделать с помощью уже знакомого нам свойства margin: используя при необходимости атрибуты: top; right; bottom; left; Вспомнить как используется свойство margin: можно здесь.

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

  • fixed; – изображение остается на месте;
  • scroll; – изображение движется вместе со страницей.

Как Вы наверное уже поняли с помощью свойства background-attachment: можно задать: используя атрибут fixed; при вертикальной прокрутке страницы изображение остается в том месте где его расположили, а при использовании атрибута scroll; – страница прокручивается, а изображение остается на месте , получается очень интересный эффект.

На сегодня это всё.

Удачи Вам.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB