Практически каждый популярный сайт имеет приятный внешний вид. В дизайне сайта важной частью является фон, который также называют 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 сайте сделать за счет изображения, то просто в коде впишите строчку:
А если хотите сделать фон сайта при помощи цвета, то строчка должна выглядеть вот так:
На этом наш рассказ завершается. Теперь вы знаете как сделать фон для сайта. Удачных проектов!
В настройке любого сайта, помимо функционала, очень важно оформление. Именно это задаёт собственный стиль и дизайн той или иной компании либо персоны, для которой создаётся сайт. Настроить цвет фона и его изображение не составит труда, следуя инструкциям в данной статье.
Откройте свой HTML файл по средствам блокнота либо любого другого текстового редактора, к которому вы привыкли. Для примера возьмём примитивную страницу сайта с минимумом текста. Открыть свой файл вы можете с помощью любого браузера.
Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета. Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names
- style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”
Обратите внимание, что у пользователей, имеющих большее разрешение экрана, ваше изображение будет дублироваться вниз и вправо. Выглядеть это будет не хорошо, если картинка не однотонная. Для исправления этого параметра существуют специальные команды.
- background-repeat : “Значение “. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
- background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll “, то изображение будет прокручиваться вместе с сайтом. “fixed ” – при прокрутке фон остаётся неизменным;
- background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain ” – заполняет страницу изображением по длинной стороне и “cover ” – заполняет страницу изображением по ширине.
Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.
П ри помощи CSS цвет и фон можно задавать практически любым элементам web-страницы, свободно управлять фоновым изображением, его повторением по горизонтали и вертикали. Кроме этого, средствами CSS можно поместить фоновое изображение в любую точку экрана используя позиционирование. Не будем пока далеко забегать, пойдем по порядку.
Свойство COLOR
Это свойство задает цвет элемента, а точнее, цвет текста внутри элемента. Значение задается одной из возможных форм:
- наименованием цвета (GREEN, BLACK, RED...);
- шестнадцатеричным кодом цвета (008000, 000000, FF0000...);
- десятичным кодом цвета в RGB (color:rgb (40, 175, 250));
Свойство COLOR является наследуемым, и при не заданном значении для какого-либо элемента значение унаследуется от его предка. Но может получиться так, что и для предка оно не задано - тогда будет применена таблица стилей браузера с использованием значений по умолчанию. Цвет элемента в этом случае скорее всего будет черным.
Как я уже упоминал, задавать цвет можно практически всем элементам, это могут быть (H1... H6), (strong, em) и даже целые (p) и даже границам таблиц, но об этом позже.
Смотрим пример задания цвета текста при помощи CSS:
h1 {color : Blue }
В этом примере все заголовки первого уровня web-страницы будут синего цвета:
strong {color : red }
В этом случае все то, что в тексте страницы будет выделено тегом strong , окрасится в красный цвет.
Можно записать так:
h1, p, strong {color : green }
Тогда заголовки первого уровня, все абзацы и все то, что выделено тегом будет зеленого цвета.
Когда же возникает необходимость выделять заголовки различными цветами, то применяются селекторы по классу. Для определения класса в HTML используется атрибут class , который можно применять к любым элементам. В HTML - коде нужно будет записать:
class="Blue" >Цвет заголовков этого класса будет синим
В таблице стилей CSS, в этом случае, пишем правило, где селектором будет элемент H1, а через точку (. ) имя класса:
h1.Blue {color : blue }
В HTML - документах исползуются так же селекторы по идентификатору, определяются они атрибутом id . Идентификатор является более значимым или приоритетным признаком, чем класс. И если в HTML - коде для элемента будет указан и класс и идентификатор, то применится стиль идентификатора. Обозначается идентификатор знаком решетки (# ). Для применения в HTML - коде идентификатора, нужно будет записать:
id="Blue" >Цвет заголовков этого идентификатора будет синим
В таблице стилей в свою очередь:
h1#Blue {color : blue }
Свойство BACKGROUND-COLOR
Это свойство позволяет задать цвет фона для страницы вцелом, абзаца, ссылки, вообщем для любого элемента HTML. Для этого в значении свойства указывается цвет или значение transparent (прозрачный). Код для фона страницы пишется:
body {background-color : aqua }
В этом случае фон страницы будет бирюзового цвета, а чтобы придать фон заголовку пишем:
h1 {background-color : yellow }
Получаем желтый фон заголовков первого уровня.
Цвет и фон в CSS
Свойство BACKGROUND-REPEAT
Это свойство применяется когда задано , для того чтобы определить будет ли оно повторяться по горизонтали и вертикали. Допустимые значения:
- repeat - изображение повторяется по вертикали и горизонтали;
- repeat-x - изображение повторяется только по горизонтали;
- repeat-y - изображение повторяется только по вертикали;
- no-repeat - изображение не повторяется.
Код пишется так:
p {
background-image
: url(адрес файла с изображением
)
;
background-repeat
: repeat-x
}
Текст этого параграфа будет поверх фонового изображения, которое расположится по горизонтали.
Свойство BACKGROUND-ATTACHMENT
Это свойство применяется для указания браузеру, должно ли фоновое изображение страницы прокручиваться с текстом (scroll ) или оставаться неподвижным (fixed ).
body {
background-image
: url(адрес файла с изображением
)
;
background-repeat
: repeat-x
;
background-attachment
: fixed
}
В этом случае фоновое изображение останется неподвижным.
Свойство BACKGROUND-POSITION
Данное свойство применяется для расположения изображения относительно . Значения задаются в процентах (%), в единицах длины (см, px), ключевыми словами:
- По вертикали:
- top - верх изображения выравнивается по верхнему краю страницы или блока;
- center
- bottom - низ изображения выравнивается по нижнему краю страницы или блока.
- По горизонтали:
- left - левый край изображения выравнивается по левому краю страницы или блока;
- center - центр изображения выравнивается по центру страницы или блока;
- right - правый край изображения выравнивается по правому краю страницы или блока.
Пишем пример кода в процентах, единицах длины и ключевыми словами:
body {
background-image
: url(адрес файла с изображением
)
;
background-position
: 0% 0%
}
Body {
background-image
: url(адрес файла с изображением
)
;
background-position
: 10px 25см
}
Body {
background-image
: url(адрес файла с изображением
)
;
background-position
: top center
}
Современные браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон и через запятую второй.
Как растянуть фон на всю ширину окна?
Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.
Как добавить фоновый рисунок на веб-страницу?
Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .
Можно ли сделать анимированный фон?
Мультипликация это достаточно сильный прием, способный оживить любой документ, поэтому не удивительно, что огромную популярность приобрела технология Flash, которая добавляет на веб-страницы мультики, к тому же интерактивные. Графический формат GIF также поддерживает простейшую анимацию путем последовательной смены кадров. Так что используя изображение в этом формате допустимо анимировать не только отдельные картинки, но также фон веб-страницы или определенного элемента.
Вначале потребуется создать анимированную картинку в формате GIF, для чего можно воспользоваться программой Adobe Photoshop или другой подходящей для этой цели. Также существуют библиотеки готовых анимированных файлов, которые можно применять в качестве фоновой картинки. Далее изображение добавляется в качестве фона с помощью стилевого свойства background , как показано в примере 1.
Как поместить фоновый рисунок в правый нижний угол страницы?
Для управления положением фонового рисунка на странице применяется стилевое свойство background-position , оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется свойство background-position со значением no-repeat .
Как сделать, чтобы фон не повторялся?
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всем поле веб-страницы. Однако такое поведение фона не всегда требуется, особенно в случае размещения единственного изображения, поэтому на помощь придет значение no-repeat , добавляемое к стилевому свойству background .
Как сделать, чтобы фон повторялся только по вертикали?
Повторение фона обычно требуется для создания декоративных линий или градиентов, привязанных к высоте элемента или окна веб-страницы. В таких случаях повторение фона по вертикали обеспечивает цельную картинку независимо от размеров элементов. Только вначале следует побеспокоиться о том, чтобы фоновое изображение повторялось без стыков.
Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.
Чтобы задать фон в HTML используйте промежуточный DOCTYPE
А начну я с того, что в HTML5 нет возможности задать . Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:
Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">
Если с этим разобрались, давайте перейдём к пониманию того, как создаётся фон. И первое, что здесь нужно отметить - это различие между фоновым цветом и фоновой картинкой . В начале идёт фоновый цвет , который заливает всё доступное пространство страницы или её элемента. Поверх него накладывается повторяющаяся фоновая картинка . Визуально это можно изобразить следующим образом:
Фон HTML-документа и его элементов
Второе, что Вам нужно знать - это различие между телом документа и элементом документа . Тело документа обозначается в HTML-коде веб-страницы тегом BODY , который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.
Элементы страницы находятся внутри тега BODY . Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.
Атрибут bgcolor для создания фонового цвета
Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor , например:
В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE :
| Текст с фоном |
Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD .
Как узнать код цвета?
Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом , например: #ec008c . Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool » (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker » (Выбор цвета) скопировать код цвета.
Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.
Также Вы можете использовать многочисленные онлайн сервисы, например:
- и т.д.
Их принцип работы ещё проще - кликаете нужный цвет и получаете его код.
Атрибут background для создания фоновой картинки
Также как в случае с фоновым цветом, так и в случае с фоновой картинкой , Вам нужно использовать специальный атрибут, а именно background , например:
В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:
Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.
А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE :
| Текст с фоном |
Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.
Абсолютный и относительный путь к фоновой картинке
Отдельно стоит уделить внимание адресу фоновой картинки . В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес , например:
В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать .
Подведём итоги
Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE . Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!
| в 22:37 | Изменить сообщение |
