Добрый день. Наверное статью можно отнести к циклу 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 этого блока выглядел бы так:
|
1 2 3 4 5 6 |
.someclass { <strong>background: lightcyan;</strong> padding: 3px; border: 1px solid #000; border-radius: 10px; } |
Выделенное свойство отвечает за цвет. Как видите я использовал в своем примере lightcyan. Полный перечень цветов, поддерживаемых в CSS можно посмотреть здесь.
Пример #2
Давайте усложним. И поместим блок внутри блока:
Этот блок тоже был написан рандомно и как ни странно не взят с какого-либо генератора текстов.
Теперь добавим к самому верхнему (по иерархии) блоку свойство background. Пользуюсь я все теми же цветами:
Этот блок меняется как ему заблагорассудится! Невероятно!
Нас явно не устраивает результат. Такая ситуация произошла потому, что по умолчанию фон (если он не назначен) считается прозрачным. Чтобы это исправить добавим свойство background ко внутреннему блоку тоже:
Нет, это просто издевательство какое-то! Перестаньте менять текст! Я буду жаловаться!
Вот так гораздо лучше. Не забывайте про то, что вместо обычного цвета можно вставить еще и картинку, но именно для блока делать это не рекомендуется. В коде наши изменения выглядят так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.textDiv { border: 1px solid #000; border-radius: 10px; padding: 3px; background: aliceblue; } .inTextDiv { border: 1px solid #000; border-radius: 10px; padding: 3px; background: seashell; } |
Фактически каждому элементу на странице можно создать собственный фон с помощью свойства CSS — background. Экспериментируйте! И поймете в полной мере как это работает, ну а мы заканчиваем. Надеемся, что этих будет достаточно.
Ну а теперь как обычно напоминаем про нашу группу в ВК, Фейсбуке, и двух каналах — в телеге и на ютубе! Мы всегда рады и готовы помочь, поэтому если у вас остались вопросы, обязательно пишите их в комментариях.