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

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

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

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

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

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

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

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

селектор{
	background-color: цвет;
}

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

с помощью ключевых слов: white, blue, purple, green.

с помощью hex-кода. Это так называемая шестнадцатеричная запись. Например: #ccc; #333333; #ededed. Ставится решетка и после нее записывается 3 или 6 символов, которые и определяют цвет. Есть много программ, где при выборе цвета вы можете посмотреть его hex-код. Например, фотошоп.

с помощью rgb формата. На этом остановимся, потому что я хотел сказать еще о многом другом в этой статье. Rgb (red, green, blue) где записываются насыщенность этих цветов от 0 до 255. Так можно получить миллионы комбинаций.

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

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

селектор{
	background-image: url(image.jpg);
}

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

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

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

background-repeat: no-repeat;

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

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

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

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

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

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

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

background-size: 100% 100%;

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

background-size: contain;

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

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

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

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

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

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

Установить размер контейнера или самого изображения так, чтобы при повторении она полностью влезала в свой контейнер.

Задать background-repeat: round и теперь изображение будет вести себя так: оно будет повторяться, но при этом копии целиком поместятся в блок. При этом у них могут немного меняться размеры.

Задать background-repeat: space. Это еще одно новое значение из CSS3. Если задано, то размеры фоновой картинки не будут меняться, но между ее копиями могут образовываться пустые пространства. Браузер сам высчитает их так, чтобы в блок поместились только целые картинки.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree