Как вставить картинку в background css

Свойство background-image в CSS

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

body

Значение url() позволяет указать путь к файлу для изображения, и оно будет отображаться в качестве фона для этого элемента. Вы также можете указать в url картинку, кодированную в base64 . Это выглядит так:

Удобно при работе с маленькими картинками. Чтобы получить такой код, воспользуйтесь сервисами вроде https://snipp.ru/tools/base64-img. Там все очень просто: загружаете картинку и получаете готовый код для сайта. При таком использовании не производится дополнительное обращение к серверу за картинкой, что хорошо для скорости загрузки.

Вместо background-image можно использовать более общее свойство background с аргументом в виде изображения.

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

Для фона можно использовать большинство известных форматов: JPG, PNG, SVG, GIF-анимацию и другие.

Формат адреса изображения

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

1. background-image: url(«https://websovet.pro/img.png»);
2. background-image: url(«images/img.jpg»);

Относительный адрес определяется относительно папки сайта, откуда загружается главный HTML документ.

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

Выравнивание изображения

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

background-size

Свойство background-size устанавливает размер изображения и может принимать значения:

• 100px 100px – картинка становится размером 100 на 100 пикселей, также можно использовать проценты;
• contain – устанавливает размер картинки равным размеру элемента;
• cover – увеличивает размер картинки по горизонтали и по вертикали, пока изображение не покроет весь элемент по горизонтали.

background-origin или background-clip

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

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

Градиенты

Еще один вариант использования фона – указать браузеру создать градиент. Вот простой пример линейного градиента:

Здесь background: linear-gradient(to right, black, white) параметры означают, что градиент будет слева направо, от черного к белому цвету.

А вот пример радиального градиента.

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

Если у Вас кнопка создана тегом , то есть отдельная статья «Как сделать input картинкой».

А в этой статье описано, как вставить картинку в button.

Чтобы вставить картинку в button, нужно поместить изображение внутрь . Есть еще вариант — воспользоваться CSS, но об этом ниже. Пример кода для добавления картинки в button в HTML:

При этом, по умолчанию, при наведении курсора на button в браузере курсор не меняет вид. Такое поведение обычно изменяют. Смотрите «Как изменить курсор при наведении на кнопку».

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

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

Скопируйте: style=»background-image: url(image.png);».

CSS-свойство background-image добавляет изображение фоном. В url нужно указать путь до картинки.

Чтобы картинка не повторялась смотрите «Как сделать чтобы картинка не повторялась».
Чтобы задать размер картинки смотрите «Как изменить размер картинки».
Чтобы задать позицию изображения смотрите «Background-position в CSS — что это».

Добавить комментарий Отменить ответ

Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK

Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

Фон для сайта (свойство CSS background)

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

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

Background-color

Задает цвет фона. Можно применять к отдельным элементам ,

или ко всему сайту через через тэг :

/* черный фон сайта */ body { background-color: #000; } /* черный фон заголовка, белый цвет шрифта */ h1 { color: #fff; background-color: #000; }

/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1

Background-image

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

body { background-color: #000; background-image: url ("my-image.jpg"); }

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

Background-size

Определяет размер фонового изображения.

div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat; }

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

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

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

• background-repeat: repeat-x — изображение повторяется только по горизонтали
• background-repeat: repeat-y — изображение повторяется только по вертикали
• background-repeat: repeat — изображение повторяется по горизонтали и вертикали
• background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

• background-attachment: scroll — прокручивается вместе со страницей
• background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

• в фиксированных единицах (пикселы, сантиметры)
• в процентах
• словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

• background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
• background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
• background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

background: #000 url("my-image.jpg") no-repeat fixed left bottom;

background: #000 url(«my-image.jpg») no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

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

Размещение картинки в блоке

В сниппете ниже одна картинка вставляется в блоки разных размеров. CSS свойство background-size: cover; делает так, чтобы фоновая картинка полностью покрывала пространство контейнера (растягивалась или сжималась, соблюдая пропорции картинки). Главный минус в том, что в некоторых случаях не будет видна вся картинка — все зависит от параметров контейнера.

.blockWbg < background-image: url(http://icdn1.digitaltrends.com/image/google-logo-feature-1030x686.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; display: inline-block; >.b1 < height: 200px; width: 100%; >.b2 < height: 100px; width: 200px; >.b3 < height: 200px; width: 100px; >.b4

У свойства background-size: есть еще вариант background-size: contain; . Он делает так, что фоновая картинка вставляется в контейнер так, чтобы полностью в нем помещаться. Но он не всегда удобен, потому что в случаях, когда пропорции контейнера не совпадают с пропорциями картинки, будут пустые места.

Если Вы не против потери пропорций картинки, то вот другой вариант.
Здесь без фона. Картинка растягивается на 100% ширину и высоту заданного блока. Пропорции могут потеряться.

.imgW < border: 1px solid gray; width: 400px; height: 300px; position: relative; >.imgW>img