CSS

background

Сейчас будет одно из самых важных CSS-свойств – это CSS-свойство «background», о котором мы говорили, кстати, в прошлом уроке, с помощью которого мы задавали цвет нашему блоку. 

С помощью CSS-свойства «background» мы можем задать либо цвет нашего блока, либо задать ему картинку. Если мы хотим задать цвет, то мы прописываем «#» и код нашего цвета. У нас следующий урок будет по цветам, там конкретно проговорим, как формируется этот код, откуда он, где его вообще взять, почему именно вот эти цифры. 

Давайте я вам покажу, как это работает.

.box{
  width:100px;
  height:100px;
  background:#000;
}

Дальше, как задать нам картинку в этот блок? Мы пишем «url» и в круглых скобочках прописываем путь к нашей картинке. Поставим всё ту же «audi.png».

.box{
  width:100px;
  height:100px;
  background: url(img/audi.png);
}

И вот на фоне у нас торчит картиночка.


Давайте побольше сделаем ширину и высоту. И вот у нас появилась наша ауди в этом блоке.


Хочу заметить, что картиночка вставилась немного обрезанной. Все потому, что картинка вставляется в 100%-ом размере изначально. И если она по размеру больше, чем блок, то, к левому верхнему углу привязывается угол картинки, и дальше показывается та часть картинки, которая пересекается с размером нашего блока. Сейчас мы сделали 600х800px – это тот кусок, который мы видим. Если мы сделаем 1000х623px, как есть размер нашей картинки, то мы увидим картинку в полном размере, так, как она есть.

На будущее если вы хотите вставить картинку и у вас блок 500х500px, а картинка у вас 2000х2000px, то лучше ее не использовать в таком размере, потому что картинка весит лишние мегабайты, лучше картинку обрезать до того размера, в котором у вас блок. То есть, если у вас блок 500х500px, то картинку лучше обрезать до размеров 500х500px. Так будет правильнее, и лишние мегабайты грузиться не будут на сайт и картинка вставится в тех размерах и тех пропорциях, которые были запланированы. Ничего обрезаться не будет, всё встанет так, как нужно. Поэтому, какой размер блока, такой размер и картинки. Если вдруг, бывают такие ситуации, когда картинка должна подстраиваться под размер блока, допустим, она прямоугольная, а должна стать квадратной, тогда используйте фишечку из следующих уроков, о которой мы поговорим. Там будет «background size», вот она отвечает за этот момент.

Собственно всё, а дальше мы «background» изучим более подробно, изучим ещё несколько штук. Пока что знайте, что «background» задаёт цвет блока и картинку, которая будет отображаться на фоне вашего блока. На этом всё. Давайте, быстрее идите к следующим урокам, там ещё куча клеевой инфы про «background».