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

06.07.1973 Facebook Twitter LinkedIn Google+ Разное

Содержание

Фоновые рисунки | htmlbook.ru

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

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

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

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

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

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

Рис. 1. Фоновая картинка без повторения

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    background: url(images/target.gif) no-repeat 30px 20px; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <p>.
  ..</p>
 </body>
</html>

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

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

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

Рис. 2. Повторение рисунка по вертикали

Рис. 3. Картинка для создания фона

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    background: #fc0 url(images/hand.png) repeat-y; /* Повторение по вертикали */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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

Рис. 4. Использование градиента в качестве фона

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

Рис. 5. Градиентное изображение для создания фона

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    background: url(images/gradient2.png) repeat-x; /* Параметры фона */
    text-align: center; /* Выравнивание блока по центру */
   }
   DIV {
    margin: auto; /* Отступы вокруг блока */
    width: 75%; /* Ширина блока */
    height: 90%; /* Высота блока */
    text-align: left; /* Выравнивание текста по левому краю */
    padding: 10px; /* Поля вокруг текста */
    background: white; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div>
    Lorem ipsum.
 
 ..
  </div>
 </body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   h3 {
    background: url(images/book.gif) no-repeat 0 50%; /* Параметры фона */
    padding-left: 20px; /* Отступ слева от текста */
   }
  </style>
 </head>
 <body>
  <h3>Заголовок</h3>
  <p>Основной текст</p>
 </body>
</html>

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

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

изображенияCSSфонвёрстка

HTML по теме

  • Тег <div>

CSS по теме

  • background
  • margin
  • padding-left
  • width

Несколько фоновых картинок | WebReference

Главная Вёрстка HTML5 и CSS3 на примерах Фон Несколько фоновых картинок

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

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

Пример 1. Три фона

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; /* Меняем масштаб */ } </style> </head> <body></body> </html>

Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис.  1.

Рис. 1. Фон с тремя изображениями

Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.

Пример 2. Анимированный фон

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; animation: ball 40s linear infinite; } @keyframes ball { from { background-position: 3000px 90%, 180% 40%, 0 0; } to { background-position: -2000px 90%, -300px 20%, 0 0; } } </style> </head> <body></body> </html>

Подробнее про анимацию рассказывается далее.

Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.

Рис. 2. Рисованная рамка

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

Рис. 3. Подготовленное для фона изображение

Сам фон выводится свойством background, оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.

Пример 3. Несколько фоновых картинок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> . aztec { width: 212px; /* Ширина блока с учётом padding */ min-height: 240px; /* Минимальная высота */ background: url(/example/image/aztec-bg.png) 0 0 no-repeat, url(/example/image/aztec-bg.png) -576px 100% no-repeat, url(/example/image/aztec-bg.png) -288px 0 repeat-y, #f3dbb3; padding: 38px; /* Поля вокруг текста с учётом границы */ } </style> </head> <body> <div> <p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p> <p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p> <p>Обоим богам приносили человеческие жертвы.</p> </div> </body> </html>

Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).

Рис. 4. Вид рамки

См. также

  • background
  • background-size
  • Линейный градиент
  • Масштабирование фона
  • Спрайты
  • Установка фона и градиента
  • Фоновая картинка

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Спрайты
Ctrl+←

Линейный градиент
Ctrl+→

Bootstrap Фоновое изображение — Учебники с расширенными примерами

Легко установить фоновое изображение для любого элемента без написания кода CSS.

Обзор

Создайте адаптивное фоновое изображение для любого элемента без кода CSS. Просто добавьте класс .bg-img к элементу и класс .has-bg-img к родительскому элементу, к которому вы хотите применить фоновое изображение. Изображения являются частью DOM и преобразуются в CSS 9.0011 background-image после они полностью загружены. Также можно смешать фоновое изображение с цветом фона , используя режим наложения фона.

Пример

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

Раздел Hero

С помощью набора Torus Kit легко установить фоновое изображение 
 

   
Главный раздел
 
   
С помощью Torus Kit легко установить фоновое изображение
 
  ...

Режим наложения фона

Чтобы смешать фоновое изображение с цветом фона, используйте один из .bg-blend- . В противном случае будет видно только фоновое изображение.

Multiply

Добавьте класс .bg-blend-multiply к классу .has-bg-img , чтобы использовать режим смешивания множить .

Режим наложения фона: Умножение 
 

   
Режим наложения фона: Умножение
 
  ...

Overlay

Добавьте класс .bg-blend-overlay к .has-bg-img , чтобы использовать режим наложения overlay .

Режим наложения фона: Наложение 
 

   
Режим наложения фона: Умножение
 
   .." alt="...">

Screen

Добавьте класс .bg-blend-screen к .has-bg-img , чтобы использовать режим наложения screen .

Режим наложения фона: Экран 
 <дел>
   
Режим наложения фона: Умножение
 
  ...

Подходящее фоновое изображение объекта

Можно создать фоновое изображение, используя только доступные служебные классы. Добавьте класс .bg к фоновому изображению, что сделает его абсолютным позиционированием и установите width: 100% и height: 100% . Затем добавьте .obj-fit-cover class this , чтобы изображение заполнило пространство. Также не забудьте установить позицию для родительского элемента. Вы можете использовать служебный класс position.

Поскольку элемент .bg будет отображаться над содержимым, вам необходимо добавить к этому содержимому классы . position-relative и .z-index-1 .

Фоновое изображение с
.obj-fit-cover 
 

   
Фоновое изображение с .obj-fit-cover
 
  ...

Часто задаваемые вопросы о фоновом изображении Bootstrap

Как изменить непрозрачность фонового изображения Bootstrap

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

Непрозрачность фонового изображения

Таким образом, вы можете использовать Hintergrundbild zu einer Kampagne hinzu

Hinweis

Die Informationen in diesem Artikel gelten nur klassischen Builder. Wie du den neuen Builder verwendest, erfährst du in den Artikel Eine E-Mail mit dem neuen Builder gestalten.

Errege noch mehr Aufmerksamkeit mit deinem Marketing – füge ein Hintergrundbild zu deinen E-Mails oder deiner Landingpage hinzu.

In diesem Artikel erfährst du, wie du ein Hintergrundbild hinzufügen kannst.

Перед началом

Bevor du mit diesem Vorgang beginnst, solltest du einige Punkte beachten.

  • In diesem Artikel erfährst du, wie du ein Hintergrundbild in eine einfache Drag-and-Drop-Vorlage oder Kampagne einbaust. Weitere Informationen zum Arbeiten mit einer benutzerspezifisch Programmierten HTML-E-Mail-Kampagne findest du im Artikel Ein Hintergrundbild in eine benutzerdefinierten HTML-Vorlage einbauen.
  • Achte darauf, dass dein Hintergrundbild unseren Vorgaben entspricht, damit es im richtigen Seitenverhältnis angezeigt wird.
  • Unsere Drag-and-drop-Vorlagen sind mobilfreundlich konzipiert; deswegen solltest du Hintergrundbilder am besten in Kampagnenbereiche einbauen, die Nur aus einer Spalte bestehen. Wenn du Hintergrundbilder in mehrspaltige Kampagnenbereiche einbaust, wird dein Layout möglicherweise auf Mobilgeräten verzerrt angezeigt.
  • In Landingpage-Kampagnen können Hintergrundbilder in den Bereich «Страница» (Seite) eingebaut werden. Wenn du ein Hintergrundbild in den entsprechenden Bereich einer E-Mail-Kampagne einbauen willst, musst du eine benutzerspezifisch programmierte HTML-E-Mail-Vorlage verwenden.
  • Wenn ein Hintergrundbild für deine E-Mail-Kampagnen in Outlook angezeigt werden soll, musst du mit einer benutzerdefinierten HTML-Vorlage arbeiten.
  • In diesem Artikel wird gezeigt, wie du ein Hintergrundbild in eine regelmäßige E-Mail-Kampagne einbaust. Je nachdem, mit welchem ​​Kampagnentyp du arbeitest, sind einzelne Optionen unter Umständen nicht hundertprozentig mit den Abbildungen identisch.

Hinweise zu Hintergrundbildern

Du kannst aus Hintergrundbildern sich wiederholende Muster gestalten oder hinter deinen Kampagnen-Inhalten ein einzelnes Bild anzeigen. Die Drag-and-Drop-Vorlagen Mailchimp Unterstützen Hintergrundbilder in den Bereeichen Preheader, Header, Copy (Fließtext), Column und Footer (Fußzeile) из E-Mail-Kampagnen sowie in den Beeichen Page (Seite), Header, Body (Fließtext) ) и нижний колонтитул (Fußzeile) от Landingpage-Kampagnen.

Hintergrundbilder werden nicht in allen E-Mail-Clients angezeigt und können in Mobil-Clients anders aussehen als geplant. Deswegen solltest du deine Kampagnen vor dem Versenden unbedingt durch Vorschau und Test prüfen.

Дополнительные компоненты и клиенты электронной почты

In dieser Tabelle findest du Angaben darüber, welche E-Mail-Clients Hintergrundbilder unterstützen bzw. nicht unterstützen. Diese Informationen solltest du bei der Planung und Durchführung von E-Mail-Kampagnen und Automatisierungen berücksichtigen.

Клиент электронной почты (клиент электронной почты) Поддержка фоновых изображений (Unterstützt Hintergrundbilder)
Outlook 2003
Outlook 2007
Outlook 2010
Outlook 2013
Gmail
Outlook. com
Яху!
iOS Mail
Apple Mail

Ein Hintergrundbild einfügen

Befolge diese Schritte, um ein Hintergrundbild hinzuzufügen.

  1. Щелкните по электронной почте Landingpage-Designer на вкладке Style (Stil).
  2. Klicke auf den Bereich, in den das Hintergrundbild eingefügt werden soll.
  3. Нажмите на Фон (Hintergrund) auf die Option Добавьте изображение вместо (Durch ein Bild ersetzen). Damit öffnet sich das Content-Studio und du kannst entweder ein Bild von deinem Computer hochladen, aus dem Content-Studio auswählen oder von einer Internetaddresse importieren.

Dein Bild wird in den ausgewählten Bereich eingefügt. Im Folgenden erfährst du, wie du ein Hintergrundbild gestaltest.

Ein Hintergrundbild gestalten

Passe das Design und die Ausrichtung des Hintergrundbilds an, um deiner Kampagne das gewünschte Erscheinungsbild zu verleihen.

Befolge die nachstehenden Schritte, um ein Hintergrundbild anzupassen.

  1. Щелкните по электронной почте Landingpage-Designer на вкладке Стиль (стиль) .
  2. Wähle den Bereich aus, der dein Hintergrundbild enthält.
  3. Нажмите на кнопку Background (Hintergrund) на Edit (Bearbeiten) , um im Foto-Editor Änderungen an deinem Bild vorzunehmen.
  4. Нажмите на Сохранить (Speichern) , um zu deiner Kampagne zurückzukehren, nachdem du die gewünschten Änderungen im Foto-Editor vorgenommen hast.

  5. Щелкните в раскрывающемся меню Размер (Größe) und wähle aus, wie groß dein Bild sein soll.

    • Wähle Auto , um das Bild in seiner tatsächlichen Größe anzuzeigen.
    • Durch Auswahl der Option Обложка (Gesamter Bereich) nimmt das Bild den gesamten Bereich ein. Diese Option eignet sich am besten für größere Bilder mit zentriertem Inhalt und kann auf bestimmten Geräten dazu führen, dass das Bild abgeschnitten dargestellt wird.
    • Durch Auswahl von Contain (An Bereich anpassen) wird das Bild so formatiert, dass es in den verfügbaren Bereich passt. So wird gewährleistet, dass auf sämtlichen Geräten das gesamte Bild angezeigt wird.

  6. Нажмите в раскрывающемся меню Позиция (Ausrichtung) und wähle zwischen den Optionen Верх (Oben) , Center (Mitte) oder Bottom (Unten) верден сол.

  7. Щелкните в раскрывающемся меню Repeat (Spiegelung) , um die Spiegelungseinstellungen für dein Bild einzustellen.

    • Wähle die Опция Нет (Keine) aus, wenn dein Bild nur einmal angezeigt werden soll.
    • Wähle die Option Вертикальный (Vertikal) aus, wenn das Bild von links nach rechts gespiegelt werden soll.
    • Wähle die Option Horizontal (Горизонтальный) aus, wenn das Bild von oben nach unten gespiegelt werden soll.
    • Матрица Wähle Вариант Both (Beide) aus, um das Bild in beide Richtungen zu spiegeln.

  8. Wähle aus, welche Запасной цвет (Alternativfarbe) angezeigt werden soll, fall der Posteingang eines Empfängers keine Hintergrundbilder unterstützt. Achte darauf, eine Farbe auszuwählen, auf der dein Text gut lesbar ist.

  9. Нажмите на Сохранить (Speichern) , wenn du mit deinen Design-Einstellungen zufrieden bist.

Im Anschluss an die Gestaltung deines Hintergrundbilds kannst du das Kampagnenlayout weiterhin anpassen, indem du per Drag-and-Drop einen beliebigen Inhaltsblock über das Bild legt. In Abschnitten mit Hintergrundbildern solltest du kurze und prägnante Nachrichten verwenden – z. B. einen Bildblock mit deinem Logo, einen Textblock, der für deine Marke wirbt, oder eine Schaltfläche, die zu deinem Online-Shop oder deiner Website führt.

Informationen zu Inhaltsblöcken

Советы по стилю (Tipps zur Gestaltung)

  • Verwende im Zweifelsfall am besten ein einfaches, zentriertes Bild, wenn du anschließend einen Inhaltsblock überlagern möchtest.
  • Am oberen und unteren Rand jedes Kampagnenabschnitts kannst du bei Bedarf Füllraum (Подкладка) hinzufügen. Auf diese Weise kannst du die Ausrichtung deines Inhaltsblocks innerhalb des Abschnitts besser steuern.
  • Standardmäßig ist das Dropdown-Menü Repeat (Spiegelung) auf None (Keine) eingestellt. Diese Einstellung eignet sich am besten für größere Bilder. Wenn du ein kleineres Bild hast und einen Mustereffekt hinzufügen möchtest, wähle die Вариант Горизонтальный , Вертикальный (Vertikal) или Оба (Beide) aus.

Hinweis

Weitere Hinweise zu Gestaltungsoptionen für unterschiedliche Bereiche in einer Kampagne findest du in dem Beitrag Design einzelner Bereiche anzeigen und bearbeiten.

Внутренний тест

Du solltest deine in Mailchimp erstellten Kampagnen immer in der Vorschau testen.

Wir empfehlen dir, bei E-Mail-Kampagnen auch dein Design gründlich zu testen.

Comments
Leave Comment