Style background image: image-set() — CSS: Cascading Style Sheets

Как установить фоновое изображение в CSS

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

Что такое CSS?

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

Создание базового веб-сайта с помощью HTML

Поскольку CSS — это всего лишь язык стилей, чтобы его использовать, нам сначала нужно что-то для стиля. Нам будет достаточно очень простого веб-сайта, чтобы начать играть с CSS. На нашей странице будет отображаться «Hello World».

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Если вы не знакомы с HTML, давайте быстро рассмотрим, что делают все элементы. Как уже упоминалось, HTML — это язык разметки, что означает, что он использует теги для обозначения того, что представляет собой текст. Всякий раз, когда вы видите слово, окруженное <> это тэг. Существует два типа тегов: тег, который отмечает начало раздела с помощью <>, и тег, который отмечает конец раздела с помощью . Текст внутри раздела также предназначен для облегчения понимания этого различия.

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

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

Связано: 10 простых примеров кода CSS, которые вы можете изучить за 10 минут

Добавление CSS в HTML

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Теперь наш абзац будет обведен черной рамкой. Добавление описания стиля в CSS к нашему тегу абзаца сообщает веб-сайту, как стилизовать абзац. Мы можем добавить больше описаний. Давайте увеличим пустое пространство или отступы вокруг нашего абзаца и отцентрируем наш текст.

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Теперь наш HTML легче читать. Вы заметите, что нам действительно пришлось изменить некоторые вещи. Тег стиля сообщает информацию о стиле веб-браузера, а также то, что нужно стилизовать. В нашем примере мы использовали два разных способа указать, что нужно стилизовать. p в теге стиля указывает веб-браузеру применить этот стиль ко всем тегам абзаца. Раздел #ourParagraph

сообщает, что только элементы стиля с идентификатором наш пункт . Обратите внимание, что информация id была добавлена ​​к тегу p в нашем теле.

Импорт файла CSS на ваш веб-сайт

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

Вместо этого мы сохраним информацию CSS в отдельном файле и импортируем этот файл для оформления страницы. Скопируйте и вставьте информацию между тегами стиля в новый файл CSS ourCSSfile.css .

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
  ' 

Затем импортируйте файл в файл HTML.

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Добавление фонового изображения с помощью CSS

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

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Чтобы изменить стиль тела в CSS, сначала используйте тело ключевое слово. Затем добавьте фигурные скобки, как мы делали до {}. Вся информация о стиле для тела должна быть заключена в фигурные скобки. Атрибут стиля, который мы хотим изменить, —

background-image . Атрибутов стиля много. Не надейтесь запомнить их все. Добавьте в закладки шпаргалку свойств CSS с атрибутами, которые вы хотите запомнить.

Связано: 8 классных HTML-эффектов, которые каждый может добавить на свой веб-сайт

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

Наш пример выглядит так:

Если ваше изображение отображается неправильно из-за размера изображения, вы можете изменить изображение напрямую. Однако в CSS есть атрибуты стиля фона, которые можно использовать для изменения фона. Изображения, которые меньше фона, будут автоматически повторяться в качестве фона. Чтобы отключить это, добавьте

background-repeat: без повтора; к вашей стихии.

Также есть два способа сделать так, чтобы изображение покрывало весь фон. Во-первых, вы можете установить размер фона равным размеру экрана с помощью background-size: 100% 100%; , но это растянет изображение и может слишком сильно его исказить. Если вы не хотите, чтобы пропорции изображения менялись, вы также можете установить background-size равным cover . Обложка заставит фоновое изображение закрывать фон, но не искажать изображение.

Изменение цвета фона

Давайте изменим последнюю вещь. Теперь, когда у нас есть фон, наш абзац трудно читать. Сделаем его фон белым. Процесс аналогичен. Элемент, который мы хотим изменить, это #ourParagraph. # указывает, что «ourParagraph» является именем идентификатора. Затем мы хотим установить для атрибута

background-color белый цвет.

 Указанный язык: HTML не существует. 
 Генерация кода не удалась!! 
' 

Гораздо лучше.

Теперь, когда вы знаете, как изменить стиль различных HTML-элементов, предела нет! Основной метод изменения атрибутов стиля тот же. Определите элемент, который вы хотите изменить, и опишите, как изменить атрибут. Лучший способ узнать больше — поиграть с различными атрибутами. Испытайте себя, чтобы изменить цвет вашего текста дальше.

Как правильно добавлять фоновые изображения на ваш сайт WordPress

Логотип WPMU DEV

Как правильно добавить фоновые изображения на ваш сайт WordPress

Добавить фоновое изображение на ваш сайт WordPress очень просто. Верно?

По большей части да.

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

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

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

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

• Добавить фоновое изображение с помощью настроек WordPress по умолчанию
• Добавление фонового изображения с помощью подключаемого модуля
• Добавление фонового изображения с помощью CSS
  • Фоновое изображение всего сайта
  • Фоновое изображение определенной категории
• Добавление фонового изображения в определенные области
• Фон (базовый) к основам

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

Какой бы ни была причина, давайте поэкспериментируем с ее изменением.

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

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

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

• На панели управления WP перейдите к пункту 9.0017 Внешний вид > Настроить > Фоновое изображение или Внешний вид > Фон/фоновое изображение .
• Нажмите кнопку Select Image , чтобы открыть медиатеку.
• Выберите нужное изображение, либо загрузив его со своего компьютера, либо выбрав его из своей медиатеки.
• После того, как вы выбрали изображение, нажмите синюю кнопку Choose image .
• В верхнем окне левого меню вы увидите, как ваш выбор заполняется. Справа вы увидите полноразмерный предварительный просмотр домашней страницы вашего сайта с фоновым изображением.

Если вам нравится то, что вы видите, нажмите синюю кнопку Опубликовать в правом верхнем углу, и все готово!

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

Параметр «Повторить» лучше всего использовать для рисунков, созданных для точного выравнивания, а не для фотографий.

Инструменты редактирования меню фонового изображения вместе со связанными с ними параметрами:

• Предустановка
  • По умолчанию, Заполнить экран, По размеру экрана, Повторить, Пользовательский
• Положение изображения
  • Центр, Верхний правый, Средний правый, Нижний правый, Средний нижний, Верхний левый, Средний левый, Нижний левый, Средний верхний
• Размер изображения
  • Оригинал, По размеру экрана, Заполнение экрана
• Повторить фоновое изображение — флажок
• Прокрутка со страницей — флажок

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

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

Добавление фонового изображения с помощью плагина

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

Вот некоторые из них: Расширенные фоны WordPress, Полноэкранный менеджер и Простое полноэкранное фоновое изображение.

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

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

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

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

1. Установите и активируйте плагин Simple Full Screen Background Image .
2. На панели управления WP выберите Внешний вид > Полноэкранное фоновое изображение .
3. Выберите нужное изображение, либо загрузив его со своего компьютера, либо выбрав его из своей медиатеки.
4. После выбора нужного изображения нажмите синюю кнопку Использовать изображение .
5. Нажмите синюю кнопку Параметры сохранения и проверьте свой сайт.

Предварительный просмотр страницы после выбора изображения в Полноэкранном фоновом изображении .

Вот оно! Теперь изображение должно отображаться на вашем сайте как полноэкранное фоновое изображение.

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

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

Добавление фонового изображения с помощью CSS

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

Настройка WP по умолчанию Дополнительное меню ввода CSS .

1. На панели инструментов WordPress перейдите к Внешний вид > Настроить .
2. Прокрутите вниз и нажмите Дополнительный CSS .
3. Вставьте соответствующий код в поле CSS следующим образом:

Фоновое изображение для всего сайта:

Loading gist 323116c6a2b8c0123031df725076be2d

Обязательно замените текст держателя для « imageURL URL» в коде на фактическое имя файла изображения. Чтобы увидеть это, выберите любое изображение в своей медиатеке и просмотрите информацию об изображении в правой части экрана.

WPMU DEV AccountFREE

Бесплатное управление неограниченным количеством сайтов WP

Неограниченное количество сайтов

Кредитная карта не требуется

Нажмите кнопку Копировать URL в буфер обмена для вставки кода CSS.

Фоновое изображение конкретной категории:

Загрузка gist b5ec07658945233270289ae7c5503cd0

Убедитесь, что в приведенном выше коде заменены две текстовые области держателя:

• Фактическое имя URL-адреса файла изображения для «

  8URL 4 imageURL»

• Допустимое имя категории для catname

Чтобы найти название категории:

1. Перейдите на панель инструментов сайта WordPress
2. Нажмите на сообщения > Категории
3. Выберите категорию, на которую хотите сослаться, и наведите указатель мыши на ссылку « Изменить » для нее; вы увидите URL-адрес в левом нижнем углу страницы, который показывает идентификатор категории
.

В этом случае идентификатор категории будет 428.

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

Добавить фоновое изображение в определенные области

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

Плагин Advanced WordPress Backgrounds для WordPress позволяет добавлять фоны с помощью блоков Гутенберга. Вы можете установить цвет, изображение или даже видео в качестве фона, и их можно просматривать на мобильных устройствах.

Также позволяет добавлять эффект параллакса к фоновым изображениям и видео.

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

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

После установки и активации плагина перейдите на панель инструментов WordPress.

1. Щелкните Post > Add New .

2. Нажмите кнопку со знаком плюс + , прокрутите вниз до Раздел Design и нажмите на блок AWB .

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

3. В любом меню (я предпочитаю использовать один из боковых столбцов) щелкните панель Изображение вверху (между Цвет и Видео ), затем нажмите синюю кнопку Выбрать изображение под ней. , и он откроет вашу медиатеку.

4. Выберите нужное изображение, затем щелкните синюю кнопку 9.0017 Нажмите кнопку .

После этого вы должны увидеть, что изображение теперь является частью блока AWB. (Если вы его не видите, щелкните значок изображения на панели значков AWB, и он должен появиться в поле зрения. )

Плагин AWB имеет две отдельные области меню для редактирования.

Используя настройки меню, вы можете изменить положение изображения (на основе индикатора на осях), размер, интервалы и т. д. Я оставил процентные настройки по умолчанию 50/50 (что ставит его прямо посередине), и размер по умолчанию Полный и Обложка.

Итак, теперь, когда у нас есть фон поста, нам нужно добавить фактический контент/текст поста.

1. Нажмите кнопку со знаком плюс + , расположенную в блоке поверх фонового изображения .

2. Нажмите на иконку Paragraph , которая добавит текстовый блок поверх нашего фонового изображения.

«Укладка» блоков возможна в AWB ; Вы можете поместить текст поверх фонового изображения.

Введите текстовое содержимое, затем измените выравнивание или цвет текста, если хотите (я так и сделал, но это необязательно), и вуаля! У нас есть пост со своим индивидуальным фоновым изображением.

Плагин AWB позволяет создавать сообщения с фоновым изображением независимо от страницы. Несколько текстовых блоков с комбинированным фоновым изображением/текстовым блоком между ними.

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

Довольно круто.

Вернуться к основам

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

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

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