Выбираем лучший фон для своего сайта

Содержание:

Управление повтором фонового изображения
Дополнительные параметры фоновой картинки для сайта
Добавление фонового изображения
Background-size
Добавление рисунка к тексту
Делаем новый фон для сайтов
Как сделать фон на сайте html
Background-repeat
Изменяем фон на сайтах Ucoz
Фиксация фона
Фон на веб-странице
- Добавление фонового рисунка
- Повторение рисунка
Параметры фонового изображения
Лучшие практики использования фоновых изображений WordPress
Как задать фоновое изображение для сайта через CSS?
Создание полупрозрачного фона в CSS
Что такое фоновое изображение WordPress?

Управление повтором фонового изображения

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

Это свойство имеет следующие доступные значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x	Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y	Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat	Фоновое изображение не будет повторяться.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
.noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h1>Значение repeat для body (по умолчанию)</h1>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:

Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Дополнительные параметры фоновой картинки для сайта

Выбираем лучший блокировщик рекламы для opera и других браузеров

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

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

1.Свойство background-repeat. Можно задать следующие значения:
- repeat – повтор фона по вертикали
- no-repeat – нет повтора
- repeat-x – замостить по горизонтали
- repeat-y – замостить по вертикали
2.Свойство background-position. Имеет несколько основных параметров:
- top left – выровнять фон по верхнему левому краю
- top right — выровнять фон по верхнему правому краю
- bottom right – выровнять по нижнем правому краю
- bottom left– выровнять по нижнем правому краю
- top center — выровнять фон горизонтально по центру, а вертикально по верхнему краю
- center – позволит выровнять фон по центру страницы как по горизонтали так и по вертикали.
Также background-position можно задавать в процентах или пикселях.
В этом случае это будет выглядеть так:

CSS

background-position: 30px 50%;

1 background-position30px50%;

где, 30px – это отступ сверху, а
50% — это положение по горизонтали (отступ слева)

Таким образом, при использовании этого свойства на первом месте стоит значение позиционирования по вертикали (top, bottom, center, проценты или пиксели), а на втором значение по горизонтали (left, right, center, проценты или пиксели)
3.Привязка фона при помощи свойства background-attachment:
- fixed – фон остается на месте при прокручивании страницы
- scroll – фон прокручивается вместе со страницей
4.Растянуть фоновое изображение для сайта по ширине:

CSS

background-size: 100% auto!important;

1 background-size100%auto!important;
5.Растянуть фоновую картинку по высоте и по ширине:

CSS

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;

1
2
3
4
5

-webkit-background-sizecover;

-moz-background-sizecover;

-o-background-sizecover;

-ms-background-sizecover;

background-sizecover;

С использованием данных параметров, код для нашего фонового изображения будет выглядеть следующим образом:

CSS

body {
background:url(‘../images/ bg-fon.jpg’);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% auto;
}

1
2
3
4
5
6
7

body {

backgroundurl(‘../images/ bg-fon.jpg’);

background-repeatno-repeat;

background-positiontopleft;

background-attachmentfixed;

background-size100%auto;

}

В случае если вы задаете фон для сайта, сделанного на CMS, то возможно вы можете столкнуться с тем, что данные стили не будут срабатывать. Это может произойти из-за того, что в теме оформления уже где-то были заданы стили для свойства background. В этом случае для каждого свойства нужно приписать правило !important, а так же более детально изучить вёрстку данной темы.

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

Если статья была для вас полезной – не забудьте поделиться ею в соцсетях, а так же подписаться на рассылку.

А на сегодня у меня все. До встречи в следующих статьях.

С уважением Юлия Гусарь

Добавление фонового изображения

Как проверить позиции своего сайта: обзор сервисов

Следующие правила добавляют цвет фона и фоновое изображение к элементу <body>. Затем мы задаем для элемента <div> (с классом wrapper) белый цвет фона:

body {
  background-color: #333;
  background-image: url('image.png');
}
.wrapper {
  width: 80%;
  margin: 20px auto 40px auto;
  background-color: #fff;
  color: #333;
}

Попробовать »

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента <body> и внутри элемента <div>. Если бы цвет фона для элемента <div> не был бы установлен, то в качестве фона был бы показан фон, который установлен для <body>, так как по умолчанию все элементы имеют прозрачный фон.

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

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

Background-size

Фон для сайта (свойство css background)

Определяет размер фонового изображения.

div {
    background url(my-image.jpg);
    background-size 100% 100%;
    background-repeat no-repeat;
}

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Добавление рисунка к тексту

С помощью фонового изображения можно автоматизировать процесс добавления рисунков
к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background, которое применяется к нужному
селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся,
аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

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

Делаем новый фон для сайтов

Существуют различные способы отыскать подходящую идею для фонового рисунка:

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

Создаем фон с помощью одного цвета

Это наиболее простой способ создать задний фон. Сегодня так практически никто не поступает. Но если вы решили сделать одноцветный фон, необходимо перейти в файл style.css и отыскать значение – body (оно отвечает за основное тело сайта). Теперь необходимо прописать функцию background-color, если ее не было, и указать код цвета. В том случае, когда вам необходимо создать задний фон для белого сайта, придется прописать следующий код:

Вы сможете найти полный перечень цветов на сайте – (STM). Для изменения цвета, просто регулируйте значение после двоеточия и наслаждайтесь результатами.

Создание фона при помощи текстуры

Таким образом вы сможете несколько разнообразить задник своего ресурса. Чем он будет интереснее, тем легче для восприятия. Текстуры могут казаться простыми, но очень красивыми, именно поэтому их часто используют. Для того чтобы подключить любую текстуру, ее необходимо загрузить в папку image. Так что вам придётся поработать с настройками в админке своего сайта. После этого необходимо прописать следующий код:

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

Делаем фон с помощью градиента

Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y). Такая возможность позволяет нам создать любой красивый фон для сайта css. Начните с создания градиента шириной в 1 мегапиксель (см. картинку ниже), сохраните его, как изображение, и загрузите на хостинг. Далее вам придётся немного поработать с кодом. Вставьте следующие строки:

Внутри него используется функция, позволяющая сменить фон. Сразу после неё следует параметр, отвечающий за цвет вашего задника, и функция, повторяющая его по оси X.

Используем большие картинки для фона сайта

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

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

Для масштабирования изображения существует свойство background-size. Именно оно отвечает на вопрос, как сделать фон в HTML на весь экран. Если установить этот параметр на 100%, фон займёт всю ширину окна браузера.

Вы можете использовать и другие форматы изображения. Например, фон для сайта png так же имеет право на жизнь. Чем более качественное вы берёте изображение, тем лучше оно растягивается на больших мониторах.

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

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

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

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

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

Рассмотрим все варианты по заданию фона на сайте.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

background-repeat: repeat-x — изображение повторяется только по горизонтали
background-repeat: repeat-y — изображение повторяется только по вертикали
background-repeat: repeat — изображение повторяется по горизонтали и вертикали
background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

background-attachment: scroll — прокручивается вместе со страницей
background-attachment: fixed — при прокрутке фон остается неподвижным

Изменяем фон на сайтах Ucoz

Сегодня всё ещё есть вебмастеры, предпочитающие бесплатные хостинги, вроде Ucoz. И специально для них мы приводим инструкцию по изменению фона. Для того чтобы изменить фон сайта на Ucoz, необходимо перейти в панель управления, зайти в «Управление дизайном», а потом в «Редактирование шаблонов».

Теперь необходимо открыть таблицу стилей (CSS), найти строчку «body» и параметр «background». После этого нужно скопировать ссылку и вставить ее в адресную строку браузера. Таким образом вы получите доступ к картинке, которая была фоном.

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

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body, то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут
background тега <body>.
Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом
все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому
обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением,
положением и повторением. Однако все эти параметры заменяет одно универсальное
свойство background, его и будем использовать в
дальнейшем.

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое
слово url. Чтобы управлять повторением картинки
применяются аргументы no-repeat (нет повторения),
repeat-x (повторение по горизонтали) и repeat-y
(повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную
на рис. 1.

Рис. 1. Фоновая картинка без повторения

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background
к селектору BODY, как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы
без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера,
она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного
положения.

Повторение рисунка

Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали
или вертикали, доступно несколько вариантов оформления веб-страниц. Например,
для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение,
показанное на рис. 3.

Рис. 2. Повторение рисунка по вертикали

Рис. 3. Картинка для создания фона

Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой
без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы.
В примере 2 приводится создание такого фонового рисунка, опять же с помощью
свойства background и его значения repeat-y.

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент
и установив его в качестве фоновой картинки (рис. 4).

Рис. 4. Использование градиента в качестве фона

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале
сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов,
а высота рисунка зависит от цели документа и предполагаемой высоты содержимого
веб-страницы. Не стоит также забывать, что рисунок большого размера приведет
к увеличению объема графического файла. А это отрицательно скажется на скорости
его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного
случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

Рис. 5. Градиентное изображение для создания фона

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном
примере добавляется слой, в котором и отображается содержимое веб-страницы.

Параметры фонового изображения

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

background-attachment: прикрепление фона

Свойство CSS background-attachment используется для «закрепления» фона. Полученный эффект позволяет сделать так, чтобы фон «прокручивался» вместе с текстом. Доступны два значения:

fixed: фоновое изображение остается закрепленным;
scroll: фоновое изображение прокручивается вместе с текстом (значение по умолчанию).

body
{
background-image: url("snow.png");
background-attachment: fixed; /* Фон остается закрепленным */
}

background-repeat: повторение фона

По умолчанию фоновое изображение повторяется в виде мозаики (таким образом, фон html-страницы распространяется на весь экран). Вы можете изменить это с помощью свойства background-repeat:

no-repeat: фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
repeat-x: изображение будет повторяться только в первой строке, горизонтально.
repeat-y: изображение будет повторяться только в первом столбце по вертикали.
repeat: фон будет повторяться в виде мозаики (значение по умолчанию).

Пример использования:

body
{
background-image: url("sun.png");
background-repeat: no-repeat;
}

background-position: положение фона

Также можно указать позицию фонового изображения с помощью background-position. Это свойство полезно только в комбинации с background-repeat: no-repeat; (фон, который не повторяется).

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

background-position: 30px 50px;

… фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

top: вверху;
bottom: внизу;
left: слева;
center: по центру;
right: справа.

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

background-position: top right;

Если я хочу отображать солнце в качестве фонового изображения (следующий рисунок), только один раз (no-repeat), всегда видимым (fixed) и расположенным в правом верхнем углу (top right), то следует написать следующий код фона html-страницы:

body
{
background-image: url("sun.png");
background-attachment: fixed; /* Фон остается  зафиксированным */
background-repeat: no-repeat; /* Фон не будет повторяться */
background-position: top right; /* Фон будет отображаться в правом верхнем углу */
}

Солнце в качестве фонового изображения в правом верхнем углу

Сочетание свойств

Если вы применяете к фону много свойств, то можно использовать своего рода «супер-свойство», называемое background. Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image, background -repeat, background-attachment и background-position.

Таким образом, можно написать:

body
{
background: url("sun.png") fixed no-repeat top right;
}

Это первое «супер-свойство», которое я вам показываю, но будут и другие. Вы должны знать следующее:

Порядок значений не важен. Можно комбинировать значения в любом порядке.
Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

Лучшие практики использования фоновых изображений WordPress

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

В большинстве случаев это так, но бывают исключения. Вот почему рекомендуем следовать этим советам.

Используйте высококачественные изображения

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

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

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

Убедитесь, что размер фоновых изображений правильный

Наряду с разрешением изображения имеет значение физический размер изображения.

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

Хорошее правило – придерживайтесь минимального размера фонового изображения WordPress 1024 x 768 пикселей. Однако другие эксперты рекомендуют больший размер, например, 1920 x 1080 пикселей. В целом, ваш лучший способ действий – оставаться где-то между 1000 и 3000 пикселей по ширине, в зависимости от того, где он отображается.
Следующий фактор, который вам нужно учитывать, — это соотношение сторон. Покрывает ли фоновое изображение весь веб-сайт или только верхнюю четверть?
Технически веб-сайт имеет портретное соотношение сторон (больше высота, чем ширина). Так что вы можете изучить эти типы картинок. Однако фоновые изображения разделов – например, фоны для заголовков или баннеров – должны оставаться в горизонтальном форматировании (больше по ширине, чем по высоте).

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

Тестирование фоновых изображений на реальном сайте и на нескольких типах устройств должно значительно упростить окончательное решение.

Перед созданием фонового изображения WordPress оптимизируйте его

Как и все изображения, загруженные в WordPress, вы оказываете себе медвежью услугу, если не оптимизируете их перед публикацией в Интернете

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

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

У вас есть два варианта оптимизации фотографий:

Оптимизируйте фоновые изображения (и все изображения веб-сайтов) перед их загрузкой в WordPress. Осуществите этот ручной процесс с помощью таких инструментов, как Photoshop Express, GIMP и Pixlr.
Автоматизируйте процесс оптимизации, установив плагин WordPress, который изменяет размер и сжимает фотографии при загрузке.

Перед установкой темы проверьте наличие поддержки фона

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

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

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

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

Как задать фоновое изображение для сайта через CSS?

Конечно, это очень удобно, если ваша CMS поддерживает установку фоновой картинки для сайта из админки. Но что же делать, если такой возможности нет или ваш сайт сделан без CMS?

В этом случае фоновую картинку для сайта лучше всего установить через css-стили. Для этого:

Вместо bg-fon.jpg – будет название вашего файла с фоновым изображением.
Вместо images может быть название вашей папки с изображениями, в том случае если она называется по другому.

В моем случае фоновая картинка для сайта находится в папке «images» в папке темы на одном уровне вложенности с файлом стилей, поэтому я указала относительный адрес расположения картинки.

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

CSS

body {
background:url(‘../images/ bg-fon.jpg’);
}

1
2
3

body {

backgroundurl(‘../images/ bg-fon.jpg’);

}

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

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>opacity</title>
  <style>
   body {
    background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
    background-size: 10% auto;
   }
   div {
	 opacity: 0.7;
 	 background: #717ceb; /* Цвет фона */
 	 padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
   <div>Так выглядит полупрозрачный блок.</div>
 </body>
</html>

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>rgba</title>
  <style>
   body { 
  background: url("http://cs614726.vk.me/v614726246/4a02/300wj_aFOK4.jpg");
  background-size: 20% auto;
}
   div {
    background: rgba(60, 150, 250, 0.7); /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>Прозрачный фон блока и непрозрачный текст.</div>
 </body>
</html>

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

Что такое фоновое изображение WordPress?

Фоновое изображение WordPress служит полным фоном вашего сайта. Это также называется настраиваемым фоном.

Независимо от того, какой вариант вы выберете, фоновое изображение в теме WordPress обрабатывает файл functions.php. Он также отображается в файле header.php.

Контроль над активацией или отключением функции настраиваемого фона для вашей темы WordPress возложена на разработчиков темы. Вы можете включить функции On или Off, но тема вашего сайта, как правило, диктует параметры по умолчанию.

В WordPress можно реализовать несколько типов фонов. Вы можете выбрать стандартный фон всего веб-сайта или тот, который скрывается за определенными элементами, такими как боковые панели и статьи.

Пользовательские фоны также возможны для более конкретных мест на сайте WordPress:

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

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

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

Загрузка фонового изображения на панель инструментов – это только часть процесса. После этого нужно настроить параметры фонового изображения

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

Настройки фонового изображения WordPress включают:

Цвет фона.
Размеры.
Положение изображения.
Должно ли изображение повторяться.
Варианты заполнения экрана или растяжения изображения.

Сначала рассмотрим лучшие практики использования фоновых изображений WordPress. Затем, как установить фоновое изображение WordPress в различных ситуациях.