Фоновый рисунок для сайта: Как добавить фоновый рисунок на веб-страницу?

Как изменить фон и границы сайта в Конструкторе REG.RU

Обратите внимание! Все действия выполняются в панели управления Конструктором.

Конструктор сайтов REG.RU

Готовый сайт с почтой совершенно бесплатно! Попробуйте прямо сейчас!

Заказать

Как изменить фон сайта

1. 1.

   Кликните на значок Шестеренка и в выпадающем меню выберите Фон:

2. 2.

   Укажите, для каких страниц вы будете менять фон — для всех страниц сразу или для отдельных:

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

   Выберите для редактирования фона область страницы:

   • Фон страницы — фон всей страницы целиком.
   • Фон шапки (хедера).
   • Фон тела страницы.
   • Фон подвала (футера).
4. 4.

   Настройте фон. В качестве фона вы можете выбрать изображение, видео или сделать фон одноцветным.

Изображение

Цвет

Видео

1. 5.

   Чтобы выбрать изображение в качестве фона, нажмите на Карандаш:

2. org/HowToStep»> 6.

   Выберите изображение:

   • На вкладке «Галерея шаблонов» можно загрузить своё изображение или выбрать предоставленное редактором.

   Чтобы загрузить изображение, нажмите Загрузить фотографию:

   Кликните на изображение и нажмите Выбрать:

   • На вкладке «Бесплатная галерея» вы можете выбрать изображение из предоставленных. Кликните по изображению и нажмите Выбрать:
   • На вкладке «URL фотографии» введите URL-адрес фотографии, нажмите Вставить и Выбрать:
3. 7.

   Укажите настройки:

   • Положение — местоположение изображения относительно страницы сайта.
   • Повторять — повторение изображения по всей странице сайта в вертикальном и горизонтальном направлении, если высота или ширина страницы больше, чем само изображение. Опция «Не прокручивать фон» закрепляет изображение, и при пролистывании страницы сайта вниз изображение остаётся на месте.
   • Прозрачность — вы можете увеличить прозрачность фонового изображения, если оно слишком яркое или сливается с содержимым вашей страницы.

   • Размер изображения:

     • Автоматически — изображение исходного размера. Если изменить Ширину или Высоту в процентах или пикселях, то размер изображения вычисляется автоматически исходя из пропорций картинки.
     • Содержать — изображение масштабируется с сохранением пропорций и целиком помещается внутри блока страницы.
     • Заполнять — загруженное изображение растягивается по всей высоте и ширине страницы. Рекомендуем загружать изображения хорошего качества с параметрами не ниже 1300х900 px.
4. 8.

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

   Выберите Цвет или Изображение второстепенного фона, нажав на Карандаш. Нажмите Применить:

5. 9.

   Для сохранения всех настроек нажмите Применить.

6. 10.

   Нажмите Опубликовать:

1. 5.

   Чтобы выбрать цвет фона, нажмите на 

   Карандаш и выберите цвет из палитры. Нажмите Применить:

2. 6.

   Нажмите Опубликовать:

Важно: Видео в качестве фона можно установить только для всей страницы целиком. Для этого в шаге 3 выберите для редактирования фона область страницы Фон страницы.

1. 5.

   Чтобы выбрать видео в качестве фона, нажмите на Карандаш:

2. 6.

   На вкладке «URL картинки/видео» выберите Видео, введите URL-адрес видео, нажмите Вставить

   и Выбрать:

3. 7.

   Укажите настройки:

   • Прозрачность (%);
   • Начинать с — введите время в формате ММ:СС, с которого будет начинаться видео;
   • Закончить в — введите время в формате ММ:СС, которым будет заканчиваться видео.

   Нажмите **Применить*:

4. org/HowToStep»> 8.

   Нажмите Опубликовать:

Готово, вы изменили фон сайта.

Как изменить границы сайта

1. 1.

   Кликните на значок Шестеренка и в выпадающем меню выберите

   Фон:

2. 2.

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

3. 3.

   Выберите для редактирования границ область страницы:

   • Фон шапки. Чтобы настроить границы шапки (хедера) сайта, задайте параметр Высота шапки в пикселях. Если поставить галочку Липкая, то верхний колонтитул будет зафиксирован при прокрутке страницы. Если поставить галочку Без фона страницы, то фон страницы не будет применен к верхнему колонтитулу.
   • Фон тела страницы. Чтобы настроить границы тела страницы, задайте параметр Отступ тела страницы снизу в пикселях. Опция позволяет добавить интервал между самым нижним модулем в теле страницы и подвалом сайта. Этот интервал рекомендуется, если на странице мало содержимого и её высоту нужно зрительно увеличить или для создания пустого места между последним модулем и подвалом.

   Важно: Ширина рабочей области тела страницы в каждом режиме фиксированная, и увеличить её нельзя (Широкий — 1200 пикселей; Десктоп — 992 пикселей; Планшет — 768 пикселей; Смартфон — 320 пикселей). Высота страницы зависит от количества содержимого на ней. При добавлении модулей на страницу её высота будет увеличиваться автоматически. Это может повлиять на отображение фонового изображения в теле страницы.

   • Фон подвала. Чтобы настроить границы подвала (футера) страницы, задайте параметр Высота подвала в пикселях.

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

   Нажмите Применить.

Альтернативный способ изменить границы

Также вы можете настроить основные границы сайта (верхнюю и нижнюю горизонтальные линии). Для этого наведите на линию курсор и перетащите её вверх или вниз:

Готово, вы изменили границы сайта.

Помогла ли вам статья?

Да

6 раз уже помогла

Как взять понравившийся фон с блога, поста, или просто с сайта

?

Как взять понравившийся фон с блога, поста, или просто с сайта

elena030672

April 29th, 2012

Автор — TATYSIY. Это цитата этого сообщения

Как взять понравившийся фон с блога, поста, или просто с сайта

Меня очень многие спрашивают — можно ли взять понравившийся фон с блога, поста, или просто с сайта, и как это сделать. . Отвечаю небольшим уроком. Конечно можно. И делается все это очень и очень просто. Проще всего, и понятнее это делается в МАЗИЛЕ. Допустим вам понравился фон моего блога, и вы хотите его взять. Встаете мышкой в любом месте фона, и жмете ПРАВУЮ КНОПКУ МЫШИ В открывшемся контекстном меню выбираете «ОТКРЫТЬ ФОНОВОЕ ИЗОБРАЖЕНИЕ» После нажатия этой кнопки, вам открывается фоновое изображение блога. Теперь вы можете или сохранить его в комп, и оттуда вставлять куда вам надо, или взять адрес, что бы вставлять его в любую формулу рамки, или просто фона Точно так же вы можете взять фон и с любого поста. Допустим вам понравился фон с поста. Вы так же встаете мышкой в любом месте фона, и жмете ПРАВУЮ КНОПКУ МЫШИ В открывшемся контекстном меню выбираете «ОТКРЫТЬ ФОНОВОЕ ИЗОБРАЖЕНИЕ» И вам так же откроется это фоновое изображение, которое вы можете взять себе и вставлять в свои посты. Аналогичным образом можно брать фоны с любого сайта, блога, дневника. Еще проще в IE (Эксплоэр) После того, как правой кнопкой мыши вы кликните в любом месте фона на сайте, появится окно: СОХРАНИТЬ ФОН КАК. В Опере и Громе сделать это сложнее, хотя тоже можно. Там надо выбирать и скопировать себе фон с сайта, использовав в контекстном меню строку «Исходный код страницы» Это под силу уже более опытным блогерам. Как видите легче всего взять фон с сайта в браузерах Mozilla Firefox и Internet Explorer. Только запомните, что фоновый рисунок — это не просто какой-то цвет (белый, зеленый, черный и т.д.), а именно рисунок или текстура. Если фоном выбрано не изображение, а просто цвет, то в контекстном меню строка «Открыть фоновое изображение» не работает. Цвет фона можно брать в таблице кодов цветов. Для тех кто не знает ТАБЛИЦА НАХОДИТСЯ ЗДЕСЬ. Для тех кто не умеет ставить большую картинку на фон блога СМОТРИТЕ УРОК ЗДЕСЬ Как сделать к каждой записи свой фон УРОК НАХОДИТСЯ ЗДЕСЬ Успехов в вашем творчестве. Из блогаГАЛИНЫ ШАДРИНОЙ

Оригинал записи и комментарии на LiveInternet.ru

Редактор Wix: добавление изображения на фон страницы | Справочный центр

Выберите фоновое изображение для своей страницы, чтобы придать ей ощущение глубины. Загрузите собственное изображение, добавьте бесплатное изображение Wix/Unsplash или купите изображение Shutterstock. Вы можете настроить такие параметры, как непрозрачность, масштаб или положение изображения, и даже добавить эффекты прокрутки (например, параллакс).

Из этой статьи вы узнаете, как:

Загрузка фонового изображения

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

Чтобы загрузить фоновое изображение:

1. Перейдите на соответствующую страницу в вашем Редакторе.
2. Нажмите Дизайн сайта в левой части редактора.
3. Наведите указатель мыши на Фон страницы и нажмите Настроить .
4. Нажмите  Изображение .
5. (в Медиа-менеджере) Нажмите + Загрузить медиафайл вверху слева.
6. Добавьте изображение со своего компьютера, других сайтов Wix, социальных сетей или URL-адреса.
7. Нажмите Изменить фон .
8. (Необязательно) Щелкните Применить к другим страницам , чтобы добавить фон на другие страницы вашего сайта.

Добавление фонового изображения из файлов вашего сайта

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

Чтобы добавить фоновое изображение на вашу страницу:

1. Перейдите на соответствующую страницу в вашем Редакторе.
2. Нажмите Дизайн сайта в левой части редактора.
3. Наведите указатель мыши на Фон страницы и нажмите Настроить .
4. Нажмите  Изображение .
5. (в Media Manager) Нажмите Site Files слева.
6. Выберите изображение для фона вашей страницы.
7. Нажмите Изменить фон в правом нижнем углу.
8. (Необязательно) Щелкните Применить к другим страницам , чтобы добавить фон на другие страницы вашего сайта.

Использование фонового изображения из Wix, Shutterstock или Unsplash

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

Чтобы добавить изображение из Wix, Unsplash или Shutterstock:

1. Перейдите на соответствующую страницу в вашем Редакторе.
2. Нажмите Дизайн сайта в левой части редактора.
3. Наведите указатель мыши на Фон страницы и нажмите Настроить .
4. Нажмите  Изображение .
5. (в Медиа-менеджере) Выберите один из следующих вариантов в разделе «Обзор»:
   • Медиа от Wix: Бесплатные изображения, иллюстрации и шаблоны, предлагаемые WIx.
   • Unsplash: Бесплатные изображения, иллюстрации и шаблоны доступны на Unsplash.
   • Shutterstock: Лицензионные изображения доступны на Shutterstock (стоимость варьируется).
6. Найдите понравившееся изображение следующими способами:
   • Прокрутите доступный выбор изображений.
   • Введите термин в строку поиска (например, «Кофе»).
   • Используйте раскрывающиеся меню фильтров, чтобы найти соответствующие изображения.
7. Выберите изображение и нажмите Изменить фон в правом нижнем углу.
8. (Необязательно) Щелкните Применить к другим страницам , чтобы добавить фон на другие страницы вашего сайта.

Помогло?

|

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

Начать сейчас

Свойства фонового изображения и градиента

Установить фоновое изображение и фоновый градиент элемента.

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

Тип

Выберите, использовать ли изображение или градиент.

Параметры и поведение:

• Изображение (по умолчанию)  — Установить фон как изображение
• Градиент  – Установить фон как градиент
• Нет — Установить фон на «Нет»

Изображение

Отображается, если в поле Тип выбрано изображение.

Установите фоновое изображение (или несколько фоновых изображений) для элемента.

Приложение и опции:

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

Дополнительную информацию о фоновом изображении см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-image. изображение.

Размер

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

Параметры и поведение:

• Авто   — установить исходный размер фона
• Содержит   – Максимально масштабируйте изображение, не обрезая его
• Обложка  — Максимально масштабируйте изображение, чтобы в элементе не было пустого места. Изображение будет обрезано при необходимости
• Числовой  — Масштабирование изображения до указанных значений ширины и высоты.
  • Ширина — Укажите ширину в пикселях или автоматически
  • Высота — укажите ширину в пикселях или автоматически

Дополнительная информация:

Дополнительную информацию о размере фонового изображения см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Повторить

Укажите, как будет повторяться фоновое изображение. (или плитка).

Параметры и поведение:

• Без повтора   – Установить фон таким образом, чтобы он не повторялся
• Повторить   — Установить фон для повторения по вертикали и горизонтали
• Повторить по горизонтали  — установить повторение фона по горизонтали
• Повторить по вертикали  — Установите фоновое изображение для повторения по вертикали

Дополнительную информацию см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Вложение

Установите фиксированное фоновое изображение или прокрутите его в окне просмотра браузера.

Параметры и поведение:

• прокрутка  — Установить фон для прокрутки с элементом
• исправлено — Исправить фон в области просмотра
• локальный  – установить фон для прокрутки содержимого элемента, если у элемента есть механизм прокрутки

Примечание:  Фоновое вложение не будет работать на iOS и некоторых других мобильных устройствах.

Дополнительную информацию см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment 9.0003

X-позиция

Установка горизонтального положения фонового изображения.

Параметры и поведение:

• слева  — установить фоновое изображение так, чтобы оно начиналось с левого края изображения
• center   – Установите фоновое изображение так, чтобы оно начиналось с горизонтального центра изображения
.
• справа  – установите фоновое изображение так, чтобы оно начиналось с правого края изображения
.

Примечание:  Используйте со смещением x для точного позиционирования изображения.

Дополнительную информацию см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

Смещение по оси X

Установка горизонтального смещения фонового изображения.

Поведение:

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

Ожидаемое значение:

• Введите число
• Допускаются отрицательные значения

Принятые единицы:

Вы можете оставить поле пустым или указать используемую единицу.

• пусто  — Просто добавьте число, и значение будет интерпретировано как пиксели и автоматически преобразовано в rem, если это поведение установлено в настройках базовых единиц
.
• пикселей  – значение будет применено в пикселях
.
• %  — значение будет применяться в процентах от ширины родительского элемента

Примечание. Дополнительные единицы принимаются. Дополнительную информацию см. на странице https://www.w3schools.com/cssref/css_units.asp

. Дополнительную информацию см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x.

Y-позиция

Установите вертикальное положение фонового изображения.

Параметры и поведение:

• верх   – установить фоновое изображение так, чтобы оно начиналось с верхнего края изображения
• центр  – Установить фоновое изображение так, чтобы оно начиналось с вертикального центра изображения
.
• нижний  — установите фоновое изображение так, чтобы оно начиналось с нижнего края изображения
.

Дополнительную информацию можно найти на странице https://developer. mozilla.org/en-US/docs/Web/CSS/background-position-y

Смещение по оси Y

Установите вертикальное смещение фонового изображения.

Поведение:

• Положительные числа смещают изображение от верхнего или нижнего края в зависимости от значения, установленного в позиции y
• Пример:  Если позиция по оси Y установлена ​​внизу, а смещение по оси Y равно 100 пикселям, изображение переместится на 100 пикселей вверх
.

Ожидаемое значение:

• Введите число
• Допускаются отрицательные значения

Принятые единицы:

Вы можете оставить поле пустым или указать используемую единицу.

• пусто  — Просто добавьте число, и значение будет интерпретировано как пиксели и автоматически преобразовано в rem, если это поведение установлено в настройках основных единиц
• пикселей  – значение будет применено в пикселях
.
• %  — значение будет применяться в процентах от ширины родительского элемента

Примечание.