Фоновый рисунок страницы html. Установка бесшовного фона в HTML

27.12.14 55.8K

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

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

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

Фон сайта #55D52B

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Фон сайта rgb(23,113,44)

Фон сайта green

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

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

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

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

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

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

• repeat-x – повторение фонового изображения по горизонтали;
• repeat-y – по вертикали;
• repeat – по обеим осям;
• no-repeat – повторение запрещено.

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

Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

• Ключевым словом (top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения (пикселях ).

Воспользуемся самым простым вариантом центрирования:

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

• scroll;


• fixed.

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

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких «метров » займет много времени?

В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.

Фон для сайта или отдельного блока

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

Body{ background-color: white; }

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

Body{ background-image: url(путь к рисунку.расширение рисунка) }

Для наглядности я предлагаю рассмотреть все подробнее на примере. Для этого я буду использовать такую картинку:

Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.

И вот для него стили:

#ct{ background-image: url(comp.png); width: 600px; height: 400px; }

Вот что у нас получилось:

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

Повторение фона

Если у вас картинка в качестве фона, то по умолчанию она будет повторяться по горизонтали и вертикали, чтобы заполнить все пространство страницы. Чтобы это убрать, используется свойство background-repeat и его значение no-repeat (не повторять). Также есть такие значения:

• Repeat-x – повторять только по горизонтали
• Repeat-y – только по вертикали

Допишем в свойства нашему графическому фону:

Background-repeat: no-repeat;

Позиция

Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.

Давайте лучше посмотрим на примерах:

Background-position: top right;

Картинка переместиться в верхний правый край. Я дал блоку также желтый фон, чтобы были видны его края.

background-position: 50% 50%;

Изображение появилось ровно по центру в своем блоке. Да-да, такое тоже возможно благодаря процентной записи позиции.

background-position: 70% 20%;

Фон смещен на 70% по горизонтали, и на 20 по вертикали.

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

Закрепление фона

Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию (scroll). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.

Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.

Сокращенная запись всего этого добра

Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:

Background: yellow url(comp.png) no-repeat 20% 100px;

Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).

Много фонов

А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку

Я назвал ее laptop.

И вот код для вставки мультифона:

Background: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; background-color: yellow;

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

Таким же образом можно записать еще сколько угодно картинок, но не переусердствуйте – слишком много графики это не очень хорошо.

Вот на этом мне бы хотелось закончить эту статью. С фоном можно делать еще много других интересных вещей, о них постараюсь писать в будущем (а кое-что уже написал – например, ).

Влад Мержевич

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

Фон на веб-странице

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

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

Добавление фонового рисунка

Добавление рисунка происходит путем установки адреса картинки через ключевое слово url . Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.

Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY , как показано в примере 1.

Пример 1. Фоновый рисунок

В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.

Повторение рисунка

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

Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью свойства background и его значения repeat-y .

Пример 2. Повторение фона по вертикали

Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).

Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).

В примере 3 показан код HTML для создания градиентного фона.

Пример 3. Повторение фона по горизонтали

Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.

Добавление рисунка к тексту

С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background , которое применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

Заголовок

Основной текст

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

Практически каждый популярный сайт имеет приятный внешний вид. В дизайне сайта важной частью является фон, который также называют 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.

Чтобы задать фон в 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

Изменить сообщение