Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB