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

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

Для выполнения поставленной задачи, Вы можете воспользоваться одним из 4-ех способов:

• 1. Фон с одного цвета
• 2. Фон с текстуры
• 3. Фон с помощью градиента
• 4. Фон с большого изображения

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

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

background-color: #83C5E9 ; (синий фон, как на примере)

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

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

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

background-color: #537759;

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

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

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

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

background-color: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

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

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

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

background-color: #000000;

background-image: url(images/название картинки.jpg);

background-position: center top;

background-repeat: no-repeat;

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

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

Те способы создания фона для сайта могут быть использованы на разных системах управления сайтами, но не на сайтах - ucoz. Для того чтобы изменить фон для сайта ucoz, необходимо перейти в панель управления сайтом, зайти в «Управлением дизайном» , а потом в «Редактирование шаблонов» .

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

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

Изменяем фон для сайта на HTML

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

А если хотите сделать фон сайта при помощи цвета, то строчка должна выглядеть вот так:

На этом наш рассказ завершается. Теперь вы знаете как сделать фон для сайта. Удачных проектов!

Трепачёв Д.П. 2012-2020 г.

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

Верстка JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Парсинг Основной учебник Справочник HTML Справочник CSS Учебник ООП и MVC Видеоуроки Основной учебник Справочник Видеоуроки Основной учебник Основной учебник Основной учебник Учебник администратора Учебник разработчика Учебник AJAX+PHP

Свойство background-attachment

Свойство background-attachment задает каким образом прокручивать фоновую картинку элемента: вместе с текстом или текст будет скользить по картинке.

Синтаксис

Селектор { background-attachment: fixed | scroll | local; }

Значения

Значение по умолчанию: scroll .

Пример . Значение scroll

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

body { background-attachment: scroll; background-image: url("bg.png"); } #elem { width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px; }

Пример . Значение scroll

А теперь свойство background-attachment установлено в значение fixed . Прокрутите элемент по вертикали - вы увидите, как текст скользит по фону:

body { background-attachment: fixed; background-image: url("bg.png"); } #elem { width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px; }

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

Значения background-attachment

Свойство может принимать три значения для настройки поведения фона:

• scroll (значение по умолчанию) - фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
• fixed - значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
• local - данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed . При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).

Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).

background-attachment: scroll

background-attachment: fixed

background-attachment: local

Поддержка браузерами

Полная поддержка всех значений свойства background-attachment есть у десктопных браузеров IE9+, Edge 12+, Firefox 25+, Chrome (все версии), Safari 5+, Opera 11.5+. Из мобильных браузеров все значения понимают Opera Mobile, Firefox для Android, IE Mobile и QQ Browser. В других браузерах поддержка либо частичная, либо отсутствует.

Далее в учебнике: свойства background-origin и background-clip для позиционирования фоновых изображений и управления обрезкой.

Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В CSS есть такое свойство background-attachment: fixed , которое позволяет зафиксировать фоновое изображение. То есть при прокрутке страницы оно не будет прокручиваться со страницей. Но в CSS нет свойства, которое позволило бы сделать смену изображений при прокрутке, поэтому мы воспользуемся Javascript.

Фиксированный фон для сайта

Возможно вы не поняли о чем я пишу, поэтому посмотрите демо и вы сами увидите этот красивый эффект:

Скачать

Как же сделать меняющийся фон для сайта?

HTML

Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id = "cbp-fbscroller" class = "cbp-fbscroller" >

В теге