Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

background

CSS
Сейчас будет одно из самых важных 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».

Предыдущий урок Следующий урок
Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

Политика конфиденциальности   Пользовательское соглашение