Фон для сайта на css – как его сделать

От автора: фоновый цвет или изображение могут определять первое впечатление от сайта. Правильно подобранный фон, не мешающий восприятию информации на странице, может улучшить поведенческие факторы. Сегодня я хотел бы показать, как задавать фон для сайта в css, а также для любого элемента на веб-странице.

Основной фон сайта

Под основным я понимаю тот, который задается всему сайту в целом, то есть селектору body, либо главному контейнеру, вмещающему в себя все блоки нашего интернет-проекта.

В WordPress вы можете менять этот фон очень легко в визуальном режиме. Для этого достаточно выбрать пункт “Внешний вид”, а в нем уже выбрать “Фон” или “Настроить”. В качестве фона можно выбрать сплошной цвет, а можно загрузить изображение. Но эта статья о том, как все это работает в css, где и прописывается это свойство.

Основные свойства фона в css

Самое первое, что вы можете определить – это сплошной цвет, который будет использоваться в качестве фонового. Это можно определить такой записью:

В качестве селектора можно выбирать любой нужный элемент, в том числе и всю страницу (body). Теперь надо разобраться с другим вопросом: как записать цвет? Возможно, вы это знаете, но я все же напомню несколько вариантов:

Как задать фоновое изображение?

Для этого используется свойство background-image, а в нем задается путь до картинки, которая перед этим должна быть помещена в соответствующую папку. Например:

Главное, не забыть поставить слово url, а потом в круглых скобках правильно записать путь. В качестве фона обычно задают jpg или png изображения. В последнем случае наша картинка может быть прозрачной, что дает определенные возможности в оформлении сайта. Если же вам нужно квадратное изображение, то намного правильнее будет использовать его в формате jpg.

Как растянуть фон в css и убрать его повторение

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

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

Как перестраховаться и исправить это? Если вы используете так называемые повторяющиеся бесшовные орнаменты, то вам бояться нечего – достаточно не записывать для такой картинки отмену повторения и она сама при необходимости растянется на изменившиеся размеры страницы.

Но что делать, если у вас обычное изображение? Решение есть – background-size, относительно новое свойство, и его значение cover. Я покажу все на примере. Есть блок шириной 300 пикселей и высотой 200 и ему задана фоновая картинка. (красивая)

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

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

Дописать свойство background-size: cover. Таким образом, изображение масштабируется так, чтобы полностью заполнить пространство блока. При этом его пропорции не изменяются.

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

Эта запись дает команду растягивать картинку на 100% по горизонтали и вертикали. Учтите, что в этом случае пропорции могут нарушаться. Если вам нужно в css растянуть фон по ширине или только по высоте, то можно записать также так:

Будет растянуто на 100% страницы или блока, но только по одной стороне (по ширине или высоте, в зависимости от размеров.)

Также все эти манипуляции по растягиванию могут ухудшить внешний вид фото, если величина поменяется очень сильно, но такое редко происходит.

Значение background-size вы также можете задавать в пикселях, когда нужно точно определить его величину. Например, это может быть полезно, если вы определяете размер повторяющегося орнамента или используете повторяющийся линейный градиент.

Трюк с повторением

Если вы используете повторение картинки, то по умолчанию она заполнит все пространство своего контейнера, при этом некоторые ее повторения могут попасть в элемент не полностью.

Чтобы оставить в блоке только полные копии картинки, можно поступить двумя способами:

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

Комментарии Вконтакте: