Академический Документы
Профессиональный Документы
Культура Документы
7 основы работы с фоном
7 основы работы с фоном
Самое простое, что может быть при работе с фоном - это заливка фона элемента одним цветом.
Это делается с помощью свойства background-color, которое принимает те же значения, что и
хорошо известное вам свойство color.
Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):
<div>Lorem ipsum dolor sit amet.</div>
div {
width: 300px;
height: 100px;
color: white;
background-color: green; /* задаем зеленый цвет фона */
}
Свойство background-image
Свойство background-image задает фоновую картинку. Делается это следующим образом:
background-image: url("путь к картинке").
Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.
Давайте в качестве фона блоку зададим следующую картинку:
Смотрите, что у нас получится - наша картинка размножится по всему блоку, замостит его:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png"); /* задаем путь к фоновой картинке */
}
Свойство background-repeat
Как вы уже видели, по умолчанию фоновая картинка мостит собой весь блок. Однако, это
поведение можно поменять с помощью свойства background-repeat.
Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет
повторяться, если задать значение repeat-x - будет повторяться по оси X (то есть по
горизонтали), а если repeat-y - картинка будет повторяться по оси Y (по вертикали).
Ну, а значение repeat задает поведение по умолчанию - картинка будет повторяться по всем
осям.
Давайте посмотрим, как работает это свойство.
Значение no-repeat
Давайте свойству background-repeat зададим значение no-repeat - в этом случае картинка не
будет повторяться вообще и станет в верхний левый угол:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png"); /* задаем путь к фоновой картинке */
background-repeat: no-repeat; /* делаем так, чтобы картинка не повторялась */
}
Значение repeat-x
А теперь зададим значение repeat-x - фоновая картинка станет повторяться по горизонтали:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png"); /* задаем путь к фоновой картинке */
background-repeat: repeat-x; /* заставляем картинку повторяться по горизонтали */
}
Значение repeat-y
Ну, а теперь сделаем так, чтобы картинка повторялась по вертикали, задав свойству
background-repeat значение repeat-y:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png"); /* задаем путь к фоновой картинке */
background-repeat: repeat-y; /* заставляем картинку повторяться по вертикали */
}
Свойство background-position
Когда мы рассматривали свойство background-repeat, я обращал ваше внимание на то, что по
умолчанию фоновая картинка располагается в левом верхнем углу. Однако, это поведение можно
поменять с помощью свойства background-position. Оно позволяет расположить фоновую
картинку в любом удобном нам месте элемента.
Данное свойство имеет два значения, которые пишутся через пробел: сдвиг фона по
горизонтали и сдвиг фона по вертикали. Собственно сдвиг можно задавать ключевыми
словами, а можно пикселями или процентами.
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right bottom;
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: left bottom;
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png"); /* задаем путь к фоновой картинке */
background-repeat: no-repeat; /* убираем повторение картинки */
background-position: center top; /* ставим ее в вверху по центру */
}
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: center center;
}
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 100px 30px;
}
А теперь сдвинем фон вправо на 90% от ширины блока и вниз на 30px. Для этого напишем 90%
30px:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 90% 30px;
}
Можно комбинировать значения и ключевые слова. Сдвинем, к примеру, фон на 90% вправо, а
по вертикали поставим по центру - 90% center:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 90% center;
}
Добавим repeat-y
Давайте теперь сделаем так, чтобы фоновая картинка повторялась, к примеру, по оси Y (то есть
по вертикали) и поставим получившуюся линию в правый верхний угол:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: repeat-y; /* картинка повторяется по оси Y */
background-position: right top; /* позиция картинки - правый верхний угол */
}
Свойство background-attachment
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url("image.png");
background-repeat: no-repeat;
background-position: right center;
}
А теперь текст будет прокручиваться по фону, а фон будет оставаться на месте, так как для
background-attachment задано значение fixed:
body {
background-image: url("image.png");
background-attachment: fixed;
}
Свойство-сокращение background
Для фона, также как и для многих других вещей, существует свойство-сокращение
background, в котором можно в любом порядке писать значения всех тех свойств, которые мы с
вами разобрали.
Смотрите пример:
<div></div>
div {
width: 100%;
height: 300px;
border: 1px solid black;
background: green url("image.png") repeat-x left bottom;
}
Этот код эквивалентен следующему коду:
div {
width: 100%;
height: 300px;
border: 1px solid black;
background-color: green;
background-image: url("image.png");
background-repeat: repeat-x;
background-position: left bottom;
}
Обратите внимание на то, что в тех местах, где нет фоновых картинок, проступает цвет фона.