Войти
Регистрация

Фон картинкой в CSS

Фон картинкой в CSS

Приветствую Вас, друзья!

Помню раньше, когда только начинал осваивать HTML, интересно было просматривать другие сайты в интернете, то как они сделаны, какие сочетания цветов использованы. Видел как везде вставлены картинки и можно было даже просто скопировать их с сайта, чего не рекомендую делать ни в коем случае.

Однажды, когда я не смог это сделать, я понял, что картинка просто сделана в виде заднего фона у блока. Кстати, я думаю, что это хороший способ избежать копирования картинок с Вашего сайта.

В этой теме расскажу, как сделать картинку фоном. Поехали.

Создадим страницу с блоком:

<body>
   <div></div>
</body>

За задний фон блока отвечает все то же свойство background.

Зададим ширину и высоту блока 200 пикселей, добавим границу, а фоном сделаем картинку размером меньше самого блока:

div {
   background: url("images/bgimage.jpg");
   border: 2px solid;
   height: 200px;
   width: 200px;

Мы указали путь к картинке и получили такой результат:

Как видите картинка замостила весь блок в виде фона. Также видно, что картинка повторяется, если нам этого не нужно, то применим параметр no-repeat

div {
   background: url("images/bgimage.jpg") no-repeat;
   border: 2px solid;
   height: 200px;
   width: 200px;

Фон больше не повторяется:

Чтобы выровнять фон необходимо использовать ключевые слова top, left, right, center

div {
   background: url("images/bgimage.jpg") center center no-repeat;
   border: 2px solid;
   height: 200px;
   width: 200px;
}

Первое значение center выравнивает по горизонтали, второе - по вертикали. Можно также использовать проценты или пиксели.

Здесь, при необходимости, можно изменить размер фона через свойство background-size, которое принимает 2 значения:

  • contain - растягивает картинку пропорционально, пока она не поместится в блок.
  • cover - растягивает картинку пропорционально, пока она не замостит весь блок.
div {
   background-size: contain;
}

Для примера в первом блоке мы используем background-size:contain, а во втором background-size:cover

Допустим, нас устраивает первый вариант, но хотелось бы закрасить пустое оставшееся место снизу и сверху, тогда пишем так:

div {
   background: url("images/bgimage.jpg") no-repeat #FFA500;
}

Таким образом можно добавлять задний цвет фона + картинка.

На этом еще одну тему, касающуюся фона для блоков, мы завершили. Надеюсь Вам интересно читать мои статьи и они Вам помогают в разработке Ваших сайтов.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?