CSS — Фон

CSSДобрый день. Наверное статью можно отнести к циклу html и css для начинающих. Но тем не менее в этой статье поговорим про фон сайта или блоков на css. Рассмотрим его свойства, вариации, возможные реализации и в целом узнаем, как можно работать с этим свойством.

CSS — Фон

Свойство background можно настроить каждому элементу на странице. Будь то кнопка или блок с текстом, форма авторизации или поле ввода информации отдельно. В связи с этим можно говорить о фоне как глобально, так и локально в рамках какого-либо элемента на странице вашего сайта. Давайте пройдемся по вариантам реализации фона с помощью CSS:

  • background: url(image.png) repeat-y — в такой вариации мы указываем просто картинку для отображения и говорим, что ее необходимо копировать по оси y (то есть вниз и вверх).
  • background: #fff — в таком случае мы просто можем указать цвет используя hex или стандартные названия цветов в формате: blue, red, cian, yellow, pink, purple, darkgreen, grey и так далее.

В целом это 2 возможные реализации, когда используется background. В версии CSS 2.1 это свойство было менее универсальным, и обладало параметрами, которые в этой статье мы рассматривать не будем. Лучше рассмотрим парочку примеров.

Пример #1

Это рандомный текст, мы совершенно не задумываясь его написали, ради того, чтобы продемонстрировать работы свойства background в css. Безусловно в этом примере мы никаких подключаемых файлов не придумывали и вкорячили внутренний css. Для того, чтобы работа была более приятной на вид мы создали бордер и немножко закруглили ему края, а так же добавили отступы, чтобы было красиво.

Здорово получилось. Теперь давайте скопируем блок и допишем ему свойство background:

Это рандомный текст, мы совершенно не задумываясь его написали, ради того, чтобы продемонстрировать работы свойства background в css. Безусловно в этом примере мы никаких подключаемых файлов не придумывали и вкорячили внутренний css. Для того, чтобы работа была более приятной на вид мы создали бордер и немножко закруглили ему края, а так же добавили отступы, чтобы было красиво.

В отдельно подключаемом файле css этого блока выглядел бы так:

Выделенное свойство отвечает за цвет. Как видите я использовал в своем примере lightcyan. Полный перечень цветов, поддерживаемых в CSS можно посмотреть здесь.

Пример #2

Давайте усложним. И поместим блок внутри блока:

Этот блок тоже был написан рандомно и как ни странно не взят с какого-либо генератора текстов.

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

Теперь добавим к самому верхнему (по иерархии) блоку свойство background. Пользуюсь я все теми же цветами:

Этот блок меняется как ему заблагорассудится! Невероятно!

И этот блок тоже вдруг неожиданно поменялся! Да что же происходит с ним!

Нас явно не устраивает результат. Такая ситуация произошла потому, что по умолчанию фон (если он не назначен) считается прозрачным. Чтобы это исправить добавим свойство background ко внутреннему блоку тоже:

Нет, это просто издевательство какое-то! Перестаньте менять текст! Я буду жаловаться!

И со мной тоже перестаньте проводить различные манипуляции! Это неприятно! Вы оскорбляете мое чувство собственного достоинства и нарушаете мое личное пространство!

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

Фактически каждому элементу на странице можно создать собственный фон с помощью свойства CSS — background. Экспериментируйте! И поймете в полной мере как это работает, ну а мы заканчиваем. Надеемся, что этих будет достаточно.

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

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

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