Online-учебник по CSS
Автор учебника: Евгений Андросов
Урок 4. Свойства и значения (фон)
В этом большом уроке мы изучим различные свойства и значения css-тегов. Сразу и приступим.
- Свойство color (цвет). Самое простое свойство. Может применяться, как самостоятельно, например:
h1 {color: red}
(все заголовки h1 должны быть красного цвета)
так и в составе других свойств, например background-color:
h1 {
color: red;
background-color: grey;
}
(все заголовки h1 должны быть красного цвета на сером фоне).
- Свойство background (фон)
Кроме уже упомянутого дополнения color, свойство background может иметь много других дополнений. Рассмотрим их все, так как это свойство может очень сильно менять внешний вид сайта и применяется, практически, всегда.
- background-image выводит в качестве фона заданное изображение, значение к нему выступает имя файла изображения и пишется следующим образом:
background-image: url(fon.jpg);
Обратите внимание на приставку “url” – она обязательна. Файл же может быть любой, с одним из трех допустимых для использования на сайтах расширений: .jpg, .gif или .png.
При этом не забывайте о такой вещи, как путь к файлу! В приведенном примере файл лежит в той же папке, что и таблица стилей. Если файл с изображением лежит, например в папке “images”, то этот пример будет выглядеть так:
background-image: url(images/fon.jpg);
Не важно в какое количество папок «спрятан» ваш файл, главное указать к нему правильный путь. Этот пример может выглядеть и так:
background-image: url(images/special_images/fons/fon.jpg);
- Свойство background-repeat (повторение фонового изображения).
В том случае, если вы используете не изображение с фоновым рисунком, как на этом сайте (просто посмотрите слева и справа от колонки с текстом), а какое-то конкретное изображение, например, цветка, вы можете повторить (размножить его изображение по всему фону страницы.
Перечислим все возможные значения этого свойства.
background-repeat: no-repeat (единичное изображение, не повторяется)
background-repeat: repeat-y (повторение изображения по вертикали)
background-repeat: repeat-x (повторение изображения по горизонтали)
background-repeat: repeat (повторение изображения по всей площади экрана)
- Свойство background-position– место размещения фонового изображения на экране.
По умолчанию, фоновое изображение размещается в левом верхнем углу экрана. Однако, с помощью значений свойства, эту позицию можно гибко менять, подбирая для него именно то место, которое вам нужно. Эти свойства указываются в пикселях, сантиметрах (не рекомендую)* или процентах и представляют собой набор координат. Например:
backgroundposition: 300px 200px;
Это значит, что изображение будет размещено на 300 пикселей слева и на 200 пикселей от верха экрана.
*измерять что-то в сантиметрах применительно к сайту – занятие не правильное. Как уже говорилось в пятом уроке Учебника по HTML - пиксели – единица измерения разрешения компьютерного монитора. Сантиметры же, в данном случае, единица относительная. Пиксели сохраняют все пропорции и на маленьком экране монитора и на большом, при указании размеров в сантиметрах, возможны серьезные искажения пропорций на разных экранах мониторов.
Еще пример:
background-position: 30% 20%;
изображение будет размещено в 30% слева и 20% от верха экрана.
По умолчанию размещение изображения идет слева и сверху. Однако это значение тоже можно поменять, указав дополнения. Например:
background-position: top right;
как вы можете догадаться, изображение будет размещено вверху справа.
- Свойство background-attachment – блокировка или прокрутка фонового изображения.
Это значит, что изображение может быть «прикреплено» к тому месту, где вы его разместили, либо прокручиваться вниз и вверх вместе с прокруткой экрана.
Собственно, это два возможных значения этого свойства. Рассмотрим их оба на примерах.
background-attachment: fixed; (фиксировано, т.е. «прикреплено» к месту на экране)
Cмотрим пример (чтобы увидеть эффект, прокручиваем страницу вниз)
background-attachment: scroll; (прокручивается вместе с экраном)
Cмотрим пример (чтобы увидеть эффект, прокручиваем страницу вниз)
По умолчанию, свойство "background-attachment" имеет значение "scroll". Поэтому если вам нужно это значение, вы можете его вообще не указывать.
Не забывайте, что все перечисленные дополнения можно и нужно указывать перечислением через пробел к одному единственному свойству "background". Например:
background: #F0EFEC url("flowers.jpg") repeat-y top right;
Так как мы не указали "attachment", по умолчанию происходит прокрутка изображения, кроме того, благодаря свойству "repeat-y", происходит повторение изображения по вертикали, ну и размещено оно в этот раз в правом верхнем углу экрана.
Вот и все в этом уроке. Переходим к следующему...
Предыдущий урок | К началу урока | К оглавлению | Следующий урок
Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!
Комментарий добавил(а): Стас
Дата: 23.09.2012
no-repeat через дефис пишется)
Задать вопрос
Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.