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

Dreamweaver tutorial 30 — Как изменить цвет фона веб-сайта

Dreamweaver — HTML и CSS с использованием Dreamweaver

Дэниел Вальтер Скотт || ВИДЕО: 30 из 34

Скачать файлы упражнений

Введение

Я рекомендую разместить ваш новый веб-сайт на Bluehost, вы можете получить большую скидку, зарегистрировавшись по этой ссылке: https://www.bluehost.com/track/byol/byol_dwhacud_30

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

1. Найдите или создайте подходящее повторяющееся фоновое изображение, полезный сайт 
    http://www.allfreebackgrounds.com
2. Откройте наш веб-сайт Bird Bath.
3. Изменить > Свойства страницы.
    
4. В разделе «Внешний вид CSS» выберите «Обзор» и найдите изображение, которое хотите использовать в качестве повторяющегося изображения. Например. Birdbath5-background-repeat.jpg
5. Выберите «Повторить» в меню «Повторить».
    
    
6. Выберите «ОК»

Неподвижное фоновое изображение.

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

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

1. Добавьте фоновое изображение, как показано в предыдущем упражнении.
2. Выберите «body» на панели «Селекторы».
3. Измените «background-attachment» на фиксированное.
4. Изменить «фоновое положение» на 50%.
5. Изменить «фоновый повтор» на «Нет».
    
6. Предварительный просмотр документа
    Примечание. При прокрутке вверх и вниз фон не должен двигаться.

Фон на 100%

Этот метод позволит вам добавить к вашей работе фоновое изображение, растянутое на весь браузер. Поддерживается всеми новыми браузерами. Некоторым старым браузерам (например, IE 8) для работы требуется немного дополнительного кода.

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

Примечание. Вам понадобится большое изображение. Текущий стандарт размера полноэкранного изображения составляет 1600×1200. Вы можете использовать что-то вроде Photoshop, чтобы создать нужный размер.

1. Откройте: Файлы упражнений Dreamweaver > Текст > Фон CSS Code.docx
2. Выделите весь код и скопируйте его.
    
    
3. В Dreamweaver выберите «Просмотр кода»
4. Поместите пару возвратов чуть выше тега:
    
5. Вставьте наш фоновый код.
    
    
6. Измените имена файлов x3 на имя нашего фонового изображения.
    напр. background-full.jpg
    
    
   Примечание. В режиме конструктора фон не отображается. Вам нужно будет предварительно просмотреть документ, чтобы увидеть результаты.
7. Файл > Предварительный просмотр в браузере > Chrome
8. Готово.
     
    
   Фон внутри div

Тег div может иметь собственное фоновое изображение. Это позволит вам поместить изображение в поле и позволит вам поместить текст сверху.

1. Выберите div на панели выбора. Мы будем использовать #text для этого упражнения.
    Примечание. В этом уроке мы делаем div размером 549 x 350 пикселей, чтобы он соответствовал изображению.
2. Найдите фоновое изображение на панели свойств.
3. Рядом с URL выберите обзор.
4. Найдите изображение Файлы упражнений Dreamweaver > Примеры изображений > background-div.jpg
   

   

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





Комментарии

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

Присоединяйтесь сегодня. Отменить в любое время.

Зарегистрироваться

Стенограмма видео

Скоро

Добавление фона сайта | Справочный центр Weblium

Статьи на тему: Изображения

Эта статья также доступна на:

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

Чтобы добавить фон сайта, выполните следующие действия.

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

Для этого наведите курсор на блок и перейдите к его настройкам, нажав на «шестеренку»:

В новом окне перейдите на вкладку «Фон», затем выберите один из трех вариантов — «Цвет», «Изображение» или «Видео»:

Добавление цветного фона

Параметр «Цвет» позволяет добавить к фону сплошной цвет или градиент.

После включения этой опции выберите цвет из текущей палитры стилей сайта:

Совет. Узнайте, как настроить цветовую палитру сайта, в статье Изменение цвета текста.

Чтобы выбрать собственный цвет фона, щелкните значок «Заливка» и выберите соответствующий цвет. Вы также можете настроить непрозрачность с помощью переключателя справа от палитры:

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

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

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

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

Когда вы устанавливаете фотографию в качестве фона, вы увидите дополнительные параметры настройки — например, применение фильтра или цветокоррекцию:

Совет.