Как вставить картинку в фон html

Как поставить картинку в качестве заднего фона для body?

Как мне поместить картинку на задний фон страницы, чтобы она заполнила экран полностью? Этот код не помог:

body

Отслеживать
задан 3 мая 2020 в 14:46
177 1 1 серебряный знак 13 13 бронзовых знаков
Можно просто надо убрать внешние отступы у body с помощью margin: 0 ?
3 мая 2020 в 14:50
background-image
3 мая 2020 в 14:59

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >body < background: url(https://picsum.photos/1000/800) no-repeat center; -webkit-background-size: cover; background-size: cover; min-height: 100vh; >h1

Контент на странице

Отслеживать
ответ дан 3 мая 2020 в 15:46
Михаил Камахин Михаил Камахин
8,674 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков

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

body

Если вы не хоте что бы картинка повторялась по оси Y или оси Х, тогда нужно добавить ещё background-repeat: no-repeat;

body < width: 100vw; height: 100vh; margin: 0; padding: 0; background: url(https://ak5.picdn.net/shutterstock/videos/16547275/thumb/1.jpg) no-repeat; background-size: cover; position: relative; >h1

ищ 
EXEMPLE
 

Отслеживать
ответ дан 3 мая 2020 в 15:48
2,152 11 11 серебряных знаков 28 28 бронзовых знаков

• html
• css
• css3
• html5
• веб-программирование

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить или изменить фон в HTML-письмах

Рассказываем обо всех способах работы с фоном при создании рассылки.

Письма на стандартном #ffffff — лаконично, удобно, читаемо, да и видно во всех почтовиках. Но что, если нужно пободрее или вообще поставить картинку фоном на всё письмо?

Вот несколько простых советов о том, как добавлять или изменять фон в HTML-письмах.

Как «раскрасить» фон с помощью HTML

Цвета в письмах прописывают в виде шестнадцатеричных чисел формата HEX (например, #444444). Важно помнить, что сокращения HEX обрабатывают не все почтовики, поэтому их в вёрстке рассылок использовать не стоит. Цвета формата RGB тоже работать не будут.

Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.

Используем один цвет

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

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

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

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

Чтобы ваше письмо выглядело так же органично, как у Моо, должны совпадать три элемента:

• цвет фона фотографий;
• цвет фона HTML-блока с текстом;
• цвет фона alt, если изображения не отображаются.

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

Несколько цветов

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

Совсем простой способ

Если только что вы запутались в кодах, рекомендуем обращаться к конструкторам писем, таким как, например, Letteros.

Здесь перекрасить блоки можно в один клик. А вторым кликом, форматировать блок в изображение, если это необходимо.

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

Некоторые конструкторы позволяют сделать изображения фоном блоков письма. Так можно и в Letteros.

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

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

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

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

На этой платформе от Campaign Monitor вы можете подобрать «пуленепробиваемый» фон для вашей рассылки и быть уверенным, что он будет выглядеть отлично на всех ОС. Здесь же прописаны HEX-цвета изображения для кода и сам кусочек кода, который вставляется в .

Правила работы с фоном‑картинкой

При добавлении фоновых изображений в имейлы важно помнить о некоторых особенностях.

• Изображения, которые вы выбираете, должны быть тематическими и не отвлекать от основного сообщения письма.
• Добавляйте только одно изображение как фон для всего имейла. Это повышает читабельность, в то время как разные изображения только «намусорят» в письме.
• Если используете конструктор, включайте адаптивность изображения. Это поможет корректно отображать фон на мобильных и десктопных устройствах.

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

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

background-color: устанавливает цвет фона

background-color: #ff0507;

background-image: url(dubi.png);

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

background-image: url(http://localhost.com/someimage.png);

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

background-image: url(../images/someimage.png); /* путь относительно html-документа */

     div < width: 250px; height: 200px; margin: 10px; >.colored < background-color: #ff0507; >.imaged 
Первый блок
 
Второй блок
   

Повторение изображения

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

С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:

• repeat-x: повторение по горизонтали
• repeat-y: повторение по вертикали
• repeat: повторение по обеим сторонам (действие по умолчанию)
• space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
• round: изображение должным образом масштабируется для полного заполнения всего пространства
• no-repeat: изображение не повторяется

Читайте также Размеры элементов CSS

Размер изображения

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

• contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
• cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
• auto: значение по умолчанию, изображение отображается в полный размер

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

background-size: 100% 100%;

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

background-size: 200px 150px; /* ширина 200 пикселей, высота 150 пикселей */

Можно задать точное значение для одного измерения — ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:

background-size: 200px auto; /* ширина 200 пикселей, автоматическая высота */

     div < width: 200px; height: 150px; margin: 10px; border: black solid 1px; background-image: url(dubi.png); >.imaged1 < background-size: cover; >.imaged2  

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

Позиция изображения

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

background-position: отступ_по_оси_X отступ_по_оси_Y;

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

Читайте также Радиальный градиент CSS

Кроме того, данное свойство может принимать одно из следующих значений:

• top: выравнивание по верхнему краю элемента
• left: выравнивание по левому краю элемента
• right: выравнивание по правому краю элемента
• bottom: выравнивание по нижнему краю элемента
• center: изображение располагается по центру элемента

background-position: top right;

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

background-attachment

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

• fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента
• local: по мере прокрутки внутри элемента фон изменяется
• scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

background-origin

Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:

• border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
• padding-box: фон устанавливается с учетом внутренних отступов
• content-box: фон устанавливается по содержимому элемента

Используем все три значения:

     div < width: 200px; height: 200px; margin: 10px; display: inline-block; /* располагаем блоки в ряд */ color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.2); background-image: url(img/phone-touch.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox  
Вся власть - котикам!
 
Вся власть - котикам!
 
Вся власть - котикам!
   

background-clip

Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:

• border-box: изображение обрезается по границам элемента
• padding-box: из изображения исключается так часть, которая находится под границами элемента
• content-box: изображение обрезается по содержимому с учетом внутренних отступов

Читайте также Прокрутка элементов CSS

Например, если к предыдущей разметке мы применим следующие стили:

div < width: 200px; height: 200px; margin: 10px; display: inline-block; color: #eee; padding:15px; border: 15px solid rgba(23,23,23,0.1); background-image: url(cats.jpg); background-size: cover; background-repeat: no-repeat; >.borderBox .paddingBox .contentBox

Тогда мы получим следующий результат:

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:

background:

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg); background-color: #eee; background-repeat: no-repeat; background-clip: border-box; background-origin: border-box; background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Фоновая картинка

В качестве фона можно использовать любое подходящее для этого изображение в формате GIF, JPEG, PNG и даже SVG. Правильно подобранный фон не отвлекает внимание от текста, хорошо сочетается с цветовой гаммой веб-страницы, при этом файл с фоном желательно должен быть небольшим по объёму, чтобы быстро загружаться.

Свойство background

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

Рис. 1. Вид страницы с фоновым рисунком

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

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

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

Если просто добавить фоновую картинку, то она будет повторяться одновременно по горизонтали и вертикали. Это поведение может быть изменено с помощью свойства background-repeat или универсального background . Есть три значения:

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

Рассмотрим вертикальный бесшовный фон — при повторении картинки по вертикали между отдельными фрагментами не заметно стыков и фоновый рисунок выглядит цельным. Предварительно следует подготовить фоновое изображение, которое должно удовлетворять ряду условий:

• занимать по высоте не меньше 20–30 пикселей;
• при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пикселя), то при отображении фона эффект его появления будет виден невооружённым глазом. Увеличение высоты позволяет замостить фон элемента быстро и незаметно.

В качестве образца фона возьмём узор, показанный на рис. 2.

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

В примере 2 показано добавление фона на веб-странице с повторением его по вертикали. Чтобы текст не выводился поверх рисунка к селектору body добавлено поле слева.

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

Результат данного примера показан на рис. 3.

Рис. 3. Вид фона, повторяющегося по вертикали

Аналогично делается и повторение по горизонтали. Предварительно готовим подходящее изображение, затем добавляем его фоном к элементу через background и включаем повторение repeat-x (пример 3).

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

Результат данного примера показан на рис. 4.

Рис. 4. Вид фона, повторяющегося по горизонтали

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position , оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat . Также можно воспользоваться универсальным background , как показано в примере 4.

Пример 4. Положение фона

Консервы из помидор

Плоды отбирают с хорошей ровной окраской, плотные и однородные по размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8, трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.

Примерный расход сырья и продуктов на литровую банку: помидоров красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background . Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right .

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

• top left = left top = 0% 0% (в левом верхнем углу);
• top = top center = center top = 50% 0% (по центру вверху);
• right top = top right = 100% 0% (в правом верхнем углу);
• left = left center = center left = 0% 50% (по левому краю и по центру);
• center = center center = 50% 50% (по центру);
• right = right center = center right = 100% 50% (по правому краю и по центру);
• bottom left = left bottom = 0% 100% (в левом нижнем углу);
• bottom = bottom center = center bottom = 50% 100% (по центру внизу);
• bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100% . Они равнозначны и дают одинаковый результат.

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body , то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.

См. также

• background
• background-attachment
• background-position
• background-repeat
• Атрибут bgproperties
• Линейный градиент
• Несколько фоновых картинок
• Спрайты
• Установка фона и градиента
• Фон в CSS