Как сделать фон для сайта, особенности применения CSS

Как сделать фон для сайта

Как сделать фон для сайта, разберем вопросы, как применить цвет в коде html, как использовать в качестве фона изображение и особенности применения CSS.

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

Содержание:

  1. Как сделать фон в html
  2. Фон сайта в CSS

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

Изображение для фона может быть зафиксировано в одном месте, либо многократно повторяться на странице при загрузке, что имеет свои особенности. В последнем случае оно просто тиражируется по осям x и y.

Как сделать фон для сайта в html

Для фона в html, можно применить такие атрибуты, как bgcolor и background. По умолчанию, браузеры в качестве фонового цвета страниц принимают белый.

Его можно поменять в атрибуте bgcolor тега <body> при помощи шестнадцатеричного кода. Допустим, так:

<body bgcolor=”#fa8e47”>

Чтобы применить в качестве фона картинку, применяем атрибут background. Его значением является адрес графического файла.

Для начала надо найти заготовку фонового изображения. В интернете ресурсов для этого достаточно много, в частности сделать это удобно на сайте //www.subtlepatterns.com/.

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

Заходим на данный сайт, здесь все просто и понятно. Можно выбрать понравившееся изображение, пусть самое первое, для примера – seigaiha.png и сохранить на свой компьютер, как правило, в папку images своего проекта. Размер его составляет в данном случае 400 на 400 px.

Установить фоновое изображение на сайт можно различными способами. Можно стили вставить непосредственно в html-документ. Или применить написание кода в редакторе Notepad++, а затем перенести в код на хостинге.

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

Фоновое изображение сайта, как уже было сказано, задается для тега body. То есть для всего тела документа, если мы задались вопросом, как сделать фон для сайта в целом.

Для этого тег должен иметь два атрибута. Первый атрибут, это background-image. Здесь мы указываем браузеру, где находится наша картинка.

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

background-image: url(. ./images/seigaiha.png);

Следующий атрибут будет называться background-repeat, означает, что изображение должно быть повторено. То есть, задача заключается в том, чтобы растиражировать фоновую картинку по оси x и по оси y.

У этого атрибута есть несколько значений, при которых картинка будет тиражироваться как по оси x, так и по оси y.

Или повторение идет только по горизонтальной оси – repeat-x, а также, по вертикали – repeat-y. Еще одно значение – no-repeat, то есть не повторять, оставить как есть.

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

background-repeat: repeat;

Фоновая картинка может находиться в любом участке экрана. Для этого тоже есть специальное свойство, и называется оно background- position. Оно может иметь два значения. Первое для оси x, второе – для оси y.

Например, чтобы картинка отстояла от левого края окна на 200 px, а сверху 300 px, запись должна иметь вид:

background- position: 200px 300px;

В свойствах background- position возможно использовать не абсолютные значения в пикселях, а относительные – в процентах.

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

background-position: 50% 300px;

Картинка в этом случае выровняется по горизонтали строго по центру. Ширина окна может меняться, но картинка по-любому будет в центре.

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

Оставьте комментарий

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