CSS Фон и изображение

В этой части учебнике вы узнаете как происходит работа с фоном в CSS, ну и конечно с изображением.

Свойства CSS для фона:

Для начала рассмотрим какие свойства нужно применять для работы с фоном, также надо предупредить, что большая часть свойств, они направленны для работы с изображением.

  • background-color — Определяет цвет фона;
  • background-image — Назначает фоновое изображение;
  • background-size — Масштабирует картинку;
  • background-position — Задаёт начальное значение изображению;
  • background-origin — определяет область позиционирования фонового рисунка;
  • background-repeat — Повторение картинки;

Если с первым всё понятно, просто меняет цвет, то с остальными посложнее.

CSS работа с изображениями:

Перейдём сразу к работе с изображением, для этого надо создать блок.

Как видите тут просто один блок, теперь покажу  как установить картинку фоном в CSS.

Про ширину и высоту вы уже знаете, но про background-image нет, как можете заметить, в качестве значения оно использует конструктор url(), внутри него путь до картинки, вот результат.

установить картинку фоном css

Тут стоит сказать что это не картинка такая, а она просто очень большая и поэтому не влезает во весь блок, что бы это изменить можно использовать background-size.

Я добавил свойство background-size и background-position, первое для того что бы картинка адаптировалась, а второе что бы она была по центру, иначе же, она будет не много в бок.

background-size и background-position

Как видите картинка нормально отображается, так как надо.

Ещё один пример:

Перейдём ещё к одному примеру, только уже посмотрим кое что другое.

То есть, единственное что поменял, это картинку, вот результат.

как убрать повторение картинки в css

Как можете понять, тут проблема в том, что картинка повторяется, поэтому, я сейчас покажу как убрать повторение картинки в CSS.

Я добавили свойство background-repeat, со значением no-repeat, что значит убрать повторение, также сделал что бы картинка отображалась по середине.

картинка без повторения css

Всё работает так как я сказал, что очень хорошо.

Вывод:

В этой части учебника мы разобрали работа с фоном и изображениями в CSS, но тут были рассмотрены самые популярны способы применения их.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: