CSS

-attachment

И последнее свойство, которое относится к «background’у” - это «attachment». Это свойство довольно-таки волшебное, и некоторые это свойство даже называют параллаксом. Можете сейчас загуглить, что такое параллакс. И если вы правильно поймёте это значение, то, на самом деле, это не параллакс, просто незнающие люди называют его параллаксом, поэтому сейчас мы до конца урока дойдём и вы просто примите себе на будущее, что этот эффект не называется параллаксом. Это не есть параллакс. Если кто-то назовёт это параллаксом, можете по лбу ему щелбан ударить и сказать, что не знает, как это всё называется. 

Для начала давайте создадим тег с классом «scroll» и зададим ему высоту 2000px.

<div class='scroll'></div>

.scroll{
  height:2000px;
}

Это я сделал для того, чтобы у нас на странице появился скролл. То есть у нас теперь есть просто пустышка высотой 2000px, которая выходит за пределы экрана и создаёт скролл. 

Теперь создаем свойство «background-attachment» и задаём «fixed».

.box{
  width: 500px;
  height: 400px;
  background-image: url(img/audi.png);
  background-attachment: fixed;
}

Тогда происходит вот такое вот волшебство: картинка фиксируется на фоне и никуда не скроллится вместе с блоком.

Дальше сделаем ширину 100%, задаём высоту пикселей 500px, но картинка не уместится, поэтому мы сделаем «background-size: cover». И давайте  еще добавим«background-position: center», чтобы картинка была поровнее, по центру.

.box{
  width: 100%;
  height: 500px;
  background-image: url(img/audi.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

Когда мы скроллим, происходит следующее.

Что происходит на самом деле? Теперь картинка позиционируется относительно всего нашего экрана, то есть, если мы поизменяем размер экрана, то она в блоке отображается немножечко по-разному. То есть картинка позиционируется и отображается относительно нашего экрана, и мы видим только ту часть, которая пересекается с размерами нашего блока. То есть картинка, на самом деле, большая, но мы видим только ту часть, которую позволяет увидеть размер этого блока. Если мы сделаем размер 100px, то картинка не изменится, но мы увидим только вот маленький ее кусочек.

Таким образом, на будущее можете уже использовать такой вот эффект и делать свои сайты немножечко красивше. Для этого вы используете свойство «background-attachment» со значением «fixed». Вот такое вот очень интересное свойство.

На этом с «background’ами» всё. Давайте изучать следующие CSS-свойства.