Этот урок все ждали с 6 октября 2009 года и вот он наконец перед вами. Мы начинаем вёрстку нашего шаблона. И в этом уроке мы с вами сверстаем шапку нашего макета, а именно Логотип и Баннер.
В этом уроке мы разберём с вами что такое "Бекграунд", как работает правило Float, и как прописать правильно с точки зрения xhtml уже давно всем знакомый тег img.
В доп.материалах как и обещал, все свойства правила background
Онлайн(качество сильно занижено):
Доп.Материалы
background-attachment - имеет параметры scroll и fixed
пример: background-attachment:fixed;
Это правило говорит фону как себя вести при прокручивании сайта, scroll - задаёт фону прокручиваться вместе с сайтом, или контентом внутри ячейки, fixed - заставляет фон стоять на месте, а контент сайта прокручиваться независимо от него. На работает на блоках (слоях).
background-color - имеет параметры transparent, шестнадцатеричное значение цвета, RGB и названия цветов (прим. red).
прим.
background-color:transparent;
background-color:#000000;
Желательно использовать исключительно шестнадцатеричный код цвета (#000000) - для задания цвета, либо transparent для задания прозрачного фона
background-image - задаёт путь до картинки которая будет использоваться на фоне.
прим. background-image:url(../images/fon.png);
Путь задаётся в скобках, перед скобками указываем что это url
background-position - этот тег задаёт расположение фоновой картинки внутри объекта, имеет значения как в единицах измерения и процентах так и буквенными обозначениями: left right center top bottom
прим.
background-position: 10px 45px;
background-position: center left;
Если мы указываем положение в единицах измерения то, в первую очередь задаём расстояние от левого края а затем от верха. Если указываем параметрами center left то учитывайте что параметр center задаёт как положение по вертикали так и по горизонтали, а затем уже отталкивайтесь в какую сторону вам необходимо.
background-repeat - задаёт размножение фона, имеет значения: no-repeat - не размножатся, repeat - размножатся по вертикали и горизонтали, repeat-x - размножатся по горизонтали и соответственно repeat-y - по вертикали.
прим. background-repeat:no-repeat;
И извеняюсь за чепуху что я наплёл в уроке, Позишин сокращается и ещё как, все теги можно записать в одну строку.
background: scroll #FFF url(img/fon.png) 50px 10px no-repeat;
