В css можно задать фон любому элементу. Также можно сделать фон картинкой.
Свойства для фона в css
Существует несколько свойств, с помощью которых можно сделать необходимый фон.
- background-color - задаёт цвет фона;
- background-image - задаёт картинку фона;
- background-repeat - определяет, будет ли повторяться фоновая картинка;
- background-position - определяет позицию фонового изображения;
- background-attachment - определяет, будет ли изображение скроллиться.
Цвет фона - background-color
Фону можно задавать стили как для всей страницы, так и для отдельных элементов. Сперва посмотрим, как работать с фоном для всей страницы. Для этого свойства в css будем прописывать к элементу <body>.
Html часть:
<HTML>
<head>
<title>Моя страница</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Лев и медведь добыли мясо и стали за него драться. Медведь не хотел уступить, и лев не уступал. Они так долго бились, что ослабели оба и легли. Лисица увидала их мясо, подхватила его и убежала.
</body>
</HTML>
Css часть:
body {background-color: orange;}
Результат:
Как видим, фон стал оранжевый. Таким образом можно задать любой цвет.
Фон картинкой - background-image
Сохраните эту картинку к себе, мы будем с ней работать (пкм - сохранить картинку как) и назовите ее fon.jpg (если она как-то по-другому будет называться):
Теперь попробуем вставить эту картинку в фон страницы.
Css часть:
body {background-image: url(fon.jpg);}
Пишется url, затем БЕЗ ПРОБЕЛОВ в скобках адрес картинки.
Результат:
Как видим, если картинка маленькая, то она повторяется как по горизонтали, так и по вертикали, пока не заполнит все свободное пространство. Но можно сделать так, чтобы она не повторялась. Переходим к следующему свойству.
Повторение картинки background-repeat
Это свойство используется только если к фону задана картинка.
Значения свойства background-repeat:
- repeat - картинкой будет заполнено все пространство (по-умолчанию);
- repeat-x - картинка будет дублирована только по горизонтали;
- repeat-y - картинка будет дублирована только по вертикали;
- no-repeat - картинка не будет дублироваться совсем.
Посмотрим пример:
body
{background-image: url(fon.jpg);
background-repeat: repeat-x;
}
Результат:
В этом примере картинка у нас дублируется только по горизонтали. Поэкспериментируйте, перебирая различные значения к свойству background-repeat.
Позиция фоновой картинки - background-position
background-position задает позицию для фоновой картинки. По умолчанию картинка находится слева (в том случае, если он не дублируется). Актуально только в том случае, если запретить дублирование картинки свойством background-repeat: no-repeat, или дублировать картинку только по x или y. Если же она будет заполнять весь фон, тогда изменений мы не увидим.
Имеет значения:
- left - слева (по умолчанию);
- right: - справа;
- top - сверху;
- bottom - снизу.
Можно также задать два значения, например, справа вверху (right top), слева внизу (left bottom) и т. д.
Пример:
body {background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: right top;
}
В примере мы задали положение картинки справа вверху. Вот что получим:
Скроллинг картинки - background-attachment
Свойство имеет несколько значений:
- scroll - фоновое изображение прокручивается вместе с содержимым;
- fixed - изображение не прокручивается, а остается на месте.
Сокращение кода
В css можно немного сократить код и написать свойство background только один раз, а значения писать к разным свойствам через пробел. Сейчас все станет понятно.
Была такая запись:
body {
background-color: orange;
background-image: url(fon.jpg);
background-repeat: no-repeat
background-position: right top;
}
Стала такая:
body {
background: orange url(fon.jpg) no-repeat right top;
}
Результат один и тот же:
Мы написали значения к разным свойствам фона, но при этом не указывали все свойства, а просто написали свойство background. А css сам определил, значение к какому именно свойству мы указали.
Задаем фон отдельному элементу
Чтобы задать фон отдельному элементу, ничего нового делать не потребуется. Достаточно в css указать этот элемент. Попробуем задать фон для параграфа.
Html часть:
<HTML>
<head>
<title>Моя страница</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Этот параграф мы оставим без изменений</p>
<p class="xxx"> А этому зададим класс и пропишем стили</p>
</body>
</HTML>
Css часть:
p.xxx {
background-color: orange;
}
И фон применится только к параграфу с классом xxx (Селектор класса и id в css). Таким же образом можно работать и с фоновой картинкой.
