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

Как сделать фон картинкой

Вы здесь: Главная — CSS — CSS Основы — Как сделать фон картинкой

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

Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:

body {
  background: url("images/bg. jpg") repeat-x #dedede;
}

Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон. Возможно, Вы сейчас спросите: «А что будет, если высота будет больше 800 пикселей?«. Вот для этого мы и задали «#dedede» — тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:

Иногда, центрирование не требуется.

И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:

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

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

• Создано 16.12.2011 13:32:22
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как сделать фон в HTML?

Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

Чтобы задать фон в HTML используйте промежуточный DOCTYPE

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Как создаётся фон на веб-странице?

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

Фон HTML-документа и его элементов

Второе, что Вам нужно знать – это различие между

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

Атрибут bgcolor для создания фонового цвета

Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:

<body bgcolor=»#ec008c»>
  <!— тело документа —>
</body>

В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:

<table bgcolor=»#ec008c»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD.

Как узнать код цвета?

Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.

Также Вы можете использовать многочисленные онлайн сервисы, например:

Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

Атрибут background для создания фоновой картинки

Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

<body background=»/2014/06/bg.jpg»>
  <!— тело документа —>
</body>

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

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

А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:

<table background=»/2014/06/bg.jpg»>
<tr>
  <td>Текст с фоном</td>
</tr>
</table>

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

Абсолютный и относительный путь к фоновой картинке

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

<body background=»/images/bg.jpg»>
  <!— тело документа —>
</body>

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

Подведём итоги

Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE. Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/03TsNz

Как задать картинку фоном страницы. Самоучитель HTML

В этой главе мы научимся делать фон страницы картинкой.

Это делается очень просто, почти так-же как и цвет фона страницы, но атрибутом background:

        <html>
        <head>
        <title>Фон страницы - картинка</title>
        </head>
        <body text="red" bgcolor="#cccccc" background="images/fone.png">
        </body>
        </html>

Зачем использовать атрибут bgcolor, если есть background

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

Мы с вами закончили изучать ссылки, а теперь еще изучили способы использовать картинки в HTML-документах и осталось нам совместить эти два раздела. Предлагаю сделать код баннера(ссылки-картинки), мы знаем основной шаблон текстовой ссылки:
<A href=»»> анкор </a>
А в ссылке картинке вместо текста вставляется код картинки:
<A href=»» > <img src=»images/logotip.png» alt=»Супер сайт»> </a>
И не забывайте в картинку вставлять размеры атрибутами width height:
<A href=»» > <img src=»images/logotip.png» alt=»Супер сайт» width=»468″ > </a>

ВСЕ!!!
А мы переходим к более интересному- ТАБЛИЦАМ!!!

Html как установить цвет фона страницы. Фоновая картинка

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

Фон для сайта

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

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

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности 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 . Принимаемые им значения:

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

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

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

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

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

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров.

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

• Имя цвета — В HTML имеется большой список и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
• HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:

style= «color:имя цвета» >…тег> — указание цвета текста по имени.

style= «color:#HEX-код» >…тег> — указание цвета текста по коду.

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге

Пример изменения цвета текста

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

style= «background:имя цвета» >…тег>

style= «background:#HEX-код» >…тег> — указание цвета фона по коду.

Пример изменения цвета фона

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

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

Основные теги HTML для создания фона

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

1. Написать атрибутом тега.
2. Через CSS стиль в HTML коде.
3. Написать CSS стиль в отдельном файле.

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

1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body../Images/Picture.jpg»)»).
3. И третий способ записи производится в двух файлах. В документе с названием index.htm в записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg»)}.

Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

background: url(Images/Picture.jpg»)

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

Как сделать фиксированный фон

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg») fixed; или вместо нее добавить после точки с запятой отдельную строчку — position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

Работа с таблицей в HTML

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

Таблицы с картинкой вместо фона: HTML примеры

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

Кроссбраузерность сайта

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

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

Также покажу отличный зарубежный сервис по подбору бесшовных фонов.
Сейчас настройки сайта делаются легче и удобнее через CMS консоли, таких как WordPress.
Бывает необходимо менять шаблоны продающих сайтов, в этом и поможет данная статья.

Если вы не знаете, что такое ХТМЛ , то это обобщенно можно назвать языком сайтов или набором правил по которым генерируются сайты.

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

Установка сплошного цвета на фон страницы.

Для того, чтобы установить фон в виде сплошного цвета , нужно в тег добавить атрибут bgcolor.

Заголовок страницы. title >
head >
body >
html >

Вы можете данный код вставить в текстовый файл и сохранить с расширением.html. Далее открыть любым браузером и увидите результат.

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

Установка картинки на фон HTML страницы.

Для того, чтобы установить на фон изображение , можно использовать атрибут background в теге .

Заголовок страницы. title >
head >
Привет. Этом моя первая страница. body >
html >

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

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

Чтобы узнать прежний путь, необходимо на странице с картинкой, нажать по картинке правой кнопкой и кликнуть по «Копировать URL картинки.» таким образом вы увидите название картинки/фона. Затем вы можете просто заменить прежнюю картинку своей, используя то же название файла.

Это были простейшие основы по настройке фона в html , теперь самое интересное. 🙂

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

Чтоб такой беды не случилось с я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в , так и в css.

В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.

Так, для установки фонового изображения через единицу html

достаточно написать такой код: … и вместо слов «адрес файла» вставить путь к картинке.

Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.

Например,

…, мы задали черный фон для нашего сайта.

Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).

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

Background как свойство в каскадных стилевых таблицах

Он задается или в отдельном файле с css стилями, или в элементе

Время для практического занятия

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

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

Также мы используем блоки больших размеров для того, чтобы отследить разницу между параметрами fixed и scroll. Обязательно попробуйте запустить пример самостоятельно и посмотреть, что выйдет!

Рекомендуем также

Как задать фон страницы в html картинкой

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

Фон для сайта

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

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

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

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

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

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

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

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

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

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

В 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 . Принимаемые им значения:

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

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

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

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

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

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css , переписав код одного из наших предыдущих примеров:

Результат будет аналогичным.

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

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

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

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Word как сделать фоновый рисунок. Фоновая картинка. Основные теги HTML для создания фона

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

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body :

Здесь фоновое изображение устанавливается с помощью атрибута background тега body.

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

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background :

Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

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

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

В статье мы рассмотрим данную тему, и научимся, как сделать картинку фоном в MS Word.

Добавляем рисунок через соответствующий пункт меню

Выбрать рисунок для страницы в Word 2007, 2010 и 2013 можно следующим образом. Откройте нужный документ и перейдите на вкладку «Разметка страницы» . Затем нажмите на кнопку «Цвет страницы» и выберите из меню .

Если у Вас установлен Word 2016, тогда в открытом документе перейдите на вкладку «Дизайн» , а дальше делайте все, как описано выше: «Цвет страницы» – «Способы заливки» .

Откроется небольшое диалоговое окно. В нем перейдите на вкладку «Рисунок» и нажмите на кнопку с таким же названием, которая находится под пустой областью посредине.

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

После того, как выберите картинку, нажмите «ОК» в соответствующем окне.

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

А минус – изображение должно быть подходящего размера. Как видите, в примере, виден только один пингвин. Соответственно, эту картинку мне нужно сохранить с другим размером через какой-нибудь редактор, например, Paint.

Делаем картинку фоном страницы

Давайте рассмотрим еще один способ, с помощью которого можно сделать нужный рисунок фоновым.

Откройте документ и переходите на вкладку . Затем нажимайте кнопку «Рисунок» , чтобы добавить его на страницу.

В следующем окошке найдите то, что подходит, на компьютере, выделите и нажмите «Вставить» .

После того, как картинка добавится, кликните по ней правой кнопкой мышки и выберите из контекстного меню «Обтекание текстом» – «За текстом» .

Теперь весь текст, который есть в документе отобразится перед картинкой. Чтобы выбранное изображение сделать фоном всего листа и убрать белые поля, его нужно растянуть. Для этого, кликните по картинке. По краям сразу появятся маркеры – точки по углам и по одной точке с каждой стороны. Используя данные маркеры, растяните рамку по ширине и высоте так, чтобы закрыть весь лист.

Вот так получилось у меня. Плюс способа в том, что самостоятельно можно выбрать, какая часть картинки отобразится на листе: целиком, или можно растянуть и сделать так, чтобы отображалась только определенная область.

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

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

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

Фон для сайта

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

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

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

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

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

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

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

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

Фон сайта #55D52B

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

Фон сайта green

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем к ознакомлению:
Как вставить рисунок
Как изменить прозрачность рисунка
Как изменить фон страницы

1. Откройте документ Ворд, в котором вы хотите использовать рисунок в качестве фона страницы. Перейдите во вкладку «Дизайн» .

Примечание: В версиях Word до 2012 года нужно перейти во вкладку «Разметка страницы» .

2. В группе инструментов «Фон страницы» нажмите кнопку «Цвет страницы» и выберите в ее меню пункт «Способы заливки» .

3. Перейдите во вкладку «Рисунок» в открывшемся окне.

4. Нажмите кнопку «Рисунок» , а затем, в открывшемся окне напротив пункта «Из файла (Обзор файлов на компьютере)» , нажмите на кнопку «Обзор» .

Примечание: Вы также можете добавить изображение из облачного хранилища OneDrive, поиска Bing и социальной сети Facebook.

5. В окне проводника, которое появится на экране, укажите путь к файлу, который вы хотите использовать в качестве фонового, нажмите кнопку «Вставить» .

6.Нажмите кнопку «ОК» в окне «Способы заливки» .

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

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

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

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

Изменяем цвет страницы

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

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

Нам необходим инструмент «Цвет страницы», который располагается во вкладке «Дизайн». Если же вы используете более старую версию (до Word 2010), то эта вкладка будет называться «Разметка страницы», в «Ворде» 2003 вам нужно будет использовать инструменты, находящиеся во вкладке «Формат». Итак, теперь на панели инструментов вам нужно отыскать и нажать кнопку «Цвет страницы».

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

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

Делаем фон страницы, используя стандартные средства

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

Для этого, находясь на той же вкладке и нажав по кнопке «Цвет страницы», в меню выберите пункт «Способы заливки». Перед вами откроется окно, в котором необходимо будет определиться с используемым инструментом. На выбор есть четыре вкладки: «Градиентная», «Текстура», «Узор» и «Рисунок». Четвертую пока что рассматривать не будем.

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

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

Во вкладке «Узор» вам предстоит выбрать один из предложенных узоров — все просто.

В целом, разумней будет, если вы самостоятельно ознакомитесь с каждой вкладкой и выберите, что-то для себя. По итогу вам нужно будет лишь нажать кнопку «ОК», чтобы изменения вступили в силу. И не забывайте, что свой выбор вы можете всегда поменять.

Делаем собственный фон страницы

Теперь переходим ко вкладке «Рисунок». Сейчас мы разберемся, как сделать фон в «Ворде», используя для этого собственную картинку.

Делается это довольно просто, в том же окне «Способы заливки», во вкладке «Рисунок» нужно нажать по одноименной кнопке, чтобы открылось окошко. В нем выберите пункт «Из файла». В появившемся проводнике нужно проложить путь к желаемому рисунку и нажать кнопку «Вставить».

После этого вы можете задать несколько параметров, затем нажимайте кнопку «ОК».

Делаем фон за текстом

Напоследок рассмотрим, как в «Ворде» сделать фон за текстом.

Процедура эта до боли проста. Изначально вам необходимо будет выделить ту часть текста, чей фон вы хотите изменить. После этого, во вкладке «Главная» нажмите на кнопку «Цвет выделения текста». Точное месторасположение кнопки вы можете видеть на картинке ниже.

В выпадающем меню вам необходимо будет выбрать цвет по вкусу и нажать по нему ЛКМ. По итогу фон за текстом окрасится в выбранный вами цвет.

Как использовать бэкграунд в письме — 21 пример

Фоновые картинки в письме — это элементы, которые сделают ваши email-рассылки более выразительными и подчеркнут главную мысль.

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

Фон может быть:

1. Всего письма;

2. Полосы;

3. Структуры;

4. Контейнера.

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

Фон письма

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

Единый цвет фона

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

Обратите внимание не только на фон, а на расположение блоков в письме. Вторая структура сделана с прозрачными отступами справа и слева в 10px. За счёт такой вёрстки шаблон смотрится более аккуратно.  

Единый цвет фона контента

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

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

Изображение в фоне

Картинка на заднем фоне — возможность преподнести запоминающийся материал.

Вы можете: создать фон с корпоративными элементами (логотипом и прочей символикой) в нейтральных оттенках, а также подобрать совершенно противоположное — в зависимости от инфоповода.

Например, компания EFREMOV по случаю выхода коллекции украшений HONEY подобрала тематический фон с пчелами.

Зачем? Чтобы вызвать правильные ассоциации. Такой подход может понравится женской аудитории, а также родителям, которым покупают ювелирные украшения по случаю знаменательных дат своим детям. Берем на заметку!

Изображение в фоне контента

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

Чем хорош пример RueLaLa? Выбрана зимняя тема, подобраны совместимые текстуры, оттенки и бэкграунд. Текст читается легко и в целом внешний вид вызывает эмоции — новый год и волшебство, как и должно быть.

Фон полосы

Фон полосы служит не просто для “вау-эффекта” при открытии, но и для акцентирования внимания на главных вещах. Чаще всего делается заливка только одной полосы для комфортного восприятия.

Структура с несколькими блоками

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

• Лого

• Заголовок

• Текст

• Картинка

Строка меню

Можно использовать фон одной полосы письма в качестве дополнительного акцента на одном или нескольких элементах писем. Например,

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

Баннер

Пример, когда баннер разрезан на три части и находится в трёх разных полосах.

С помощью синей заливки, подобранной в тон блоку с текстом, акцент находится именно на фразе “The Action Starts now”. Для остального содержимого письма используется обычный черный фон.

Футер

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

Например:

1. На социальных сетях;

2. Категориях сайта, если нет строки меню в шаблоне;

3. Подписи менеджера, который подготовил материал;

4. Адресе на карте и многом другом.

Важно: не забудьте о ссылке на отписку — она всегда должна быть контрастной и заметной.

Фон структуры

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

Логотип

В последнее время многие перешли на размещение лого на нейтральном фоне, а уже после баннер и контент. Тут каких-либо правил нет. Логотип — главный элемент по идентификации бренда.

Футер

Пример футера, который привлекает внимание, так как всё письмо просто на белом фоне. В блоке “Футер” включены: логотип, каталог сайта, услуги, адрес и отписка.

Изображение в структуре

Компания Harry Winston специализируется на ювелирных изделиях, поэтому большинство рассылок приходят с идеями подарков и инфоповодов для них. Данный блок получился красивым и полезным. Помимо фона структур — это 3 полноценные кнопки, ведущие на сайт. Такое стилистическое решение хорошо тем, что и на компьютере, и на смартфоне при перестройке блоков письмо будет выглядеть без изменений.

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

Текстура в карточке товара

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

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

Баннер

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

Меню

Меню выполняет функции не только навигации по сайту, но и может быть стильным даже, если письмо вообще без фона.

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

Фигурные элементы в структуре

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

Это применяется не так часто в вёрстке email-рассылок, но зато как эффектно. Берем на вооружение — этот беспроигрышный вариант запомниться надолго!

Фон контейнера

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

В карточках товаров

“Как расположить товары?” — главный вопрос перед каждой рассылкой. Если уж на баннер можно найти идеи в интернете, то на карточках товаров сразу появляется проблема: в примерах ракурсы одни, а у вас другие. Все вместе не становится в общую композицию. Как быть? Добавив к стандартным фото тематическое фоновое изображение, можно получить яркий акцент в e-mail.

Подбирая изображение, помните, что оно должно соответствовать тематике рассылки и стилю вашего бренда.

На баннерах

Нужно срочно сделать рассылку, а дизайнера нет под рукой? Или вам сделали баннер, а нужно быстро поменять текст, но нет такой возможности?

Загрузите картинку фоном структуры, добавьте контейнер с текстом и нужной кнопкой — баннер готов!

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

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

Под промокодом

Давать статичный промокод в email-рассылке — стандартная практика, но часто им так и не пользуются люди. Причиной тому является неудобство: нужно сначала перейти на сайт, заказать товар, перейти из корзины в письмо, запомнить промокод и написать, вернувшись обратно в корзину. Слишком много действий? Да.

Почему бы не дать возможность человеку просто скопировать заветное слово и не вставить на этапе завершения покупки? Загрузите баннер фоном в структуру, создайте в ней контейнер, напишите промокод и залейте цветом, который будет выделяться. Все очень просто 🙂

В тексте

Для писем, которые в большей степени заполнены текстовым контентом, недостаточно просто выделить жирным начертанием слова и вставить ссылки.

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

Бонус

Мы не могли пройти мимо этих примеров и не упомянуть их.

Пример 1: все и сразу

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

• Фон контейнеров и товаров соответствуют друг другу;

• Меню, лого, футер здорово оттеняют светлый фон письма и не делают его блеклым;

• Фон письма нейтрален и значки идентичны иконкам на сайте.

Совет: не стоит бояться экспромта и сумасшедших идей в рассылках email-писем. Пробуйте и смотрите на обратную связь от вашей целевой аудитории. Только вы знаете ее лучше всего.

Пример 2: ярко vs наляписто

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

• Фон письма с крупными элементами и очень яркий;

• Пастельный фон контента удачно нейтрализует фон;

• Шрифт читабелен, основная идея понятна;

• Из фирменных элементов только логотип и шрифт текста.

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

Вывод

Мы проанализировали все возможные варианты использования фона в письмах.

Главный вывод, который можно сделать: при создании шаблона для рассылки, красоту можно сделать самостоятельно, без знания html-верстки и обращения к дизайнеру:

• Не бойтесь экспериментов;

• Тестируйте подходы к представлению своих товаров или услуг;

• Не отходите от основной идеи вашего бренда;

• Вызывайте эмоции своей целевой аудитории, зная ее “кнопки”;

• Будьте собой.

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

Подробнее о том, как же создать фон в редакторе eSputnik смотрите в инструкции.

HTML | Атрибут фона

Атрибут HTML background используется для определения фонового изображения для документа.
Синтаксис:

Значения атрибутов: Он содержит значение, например URL , которое указывает адрес фонового изображения.

• Абсолютный URL: Указывает на другой веб-сайт.
• Относительный URL: Указывает на файл на веб-сайте.

Пример:

html

Выход:

Поддерживаемые браузеры: Атрибут поддерживает фоновый браузер. перечисленные ниже:

• Google Chrome
• Internet Explorer
• Firefox 9002 3
• Safari
• Opera

Вниманию читателя! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.

HTML / теги таблицы / фоновое изображение - индекс тега

 
   : применяется ко всей таблице

  

Атрибут расширения. (Нестандартный атрибут)

Используйте CSS вместо этого атрибута. Подробную информацию о CSS см. В «Связанном документе».

Пример

Фоновое изображение

 
   
 

 Строка1 - Столбец1 
 Строка1 - Столбец2 
 Строка1 - Колонка3 


 Строка2 - Столбец1 
 Строка2 - Столбец2 
 Строка2 - Столбец3 


 Строка3 - Столбец1 
 Строка3 - Столбец2 
 Строка3 - Столбец3 

 
  

 
  


 Строка1 - Столбец1 
 Строка1 - Столбец2 
 Строка1 - Колонка3 

 
 
 Строка2 - Столбец1 
 Строка2 - Столбец2 
 Строка2 - Столбец3 
 
 

 Строка3 - Столбец1 
 Строка3 - Столбец2 
 Строка3 - Столбец3 


 
 

 
   


 Строка1 - Столбец1 
 
  Ряд1 - Столбец 2  
 
 Строка1 - Колонка3 


 Строка2 - Столбец1 
 
  Row2 - Col2  
 
 Строка2 - Столбец3 


 Строка3 - Столбец1 
 
  Row3 - Col2  
 
 Строка3 - Столбец3