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

Как сделать картинку фоном в HTML и CSS. 3 простых способа

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

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

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в <div />, который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.

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

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

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

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

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

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

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

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

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

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

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

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

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

4 простых способа изменить фон на фотографии – качественный результат
без Фотошопа

4.6 Оценок: 5 (Ваша: )

Наверняка вам не раз приходилось удалять хорошую фотографию из-за неудачной локации на заднем плане или неэстетичной детали, попавшей в кадр. Однако и такие снимки можно спасти! Для этого даже не нужно осваивать сложный софт вроде Photoshop – сейчас существуют гораздо более доступные инструменты на любой уровень навыков. В этой статье мы расскажем, как поменять фон на фото разными способами: в простом фоторедакторе, при помощи встроенных средств Windows, на смартфоне или в онлайн-сервисе.

Содержание:

Способ 1. Качественная замена фона
в простом фоторедакторе

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

Мы покажем, как добиться цели в редакторе ФотоКОЛЛАЖ. Это – удобная программа на русском языке с простым и понятным управлением, которую оценят как новички, так и более продвинутые пользователи. Позволяет без особого труда проводить сложный фотомонтаж, в частности – вырезать объекты и накладывать на другой фон. Помимо этого, вы сможете создать постер, коллаж, открытку, превью на Ютуб и многое другое.

Шаг 1. Установите ФотоКОЛЛАЖ

Скачайте ФотоКОЛЛАЖ бесплатно и отыщите фото с неудачным фоном в папке «Загрузки». Для запуска установки два раза нажмите по инсталлятору и следуйте инструкциям на экране. Не забудьте расположить на рабочем столе ярлык программы для быстрого доступа.

Шаг 2. Настройте параметры

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

Создайте новый проект

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

Укажите параметры страницы, определившись с размером будущей картинки

Шаг 3. Импортируйте главное фото

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

Добавьте фотографию, объекты которой хотите разместить на новом фоне

Шаг 4. Выделите главный объект

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

• Свободная форма. Позволяет указывать границы произвольно, выделяя главный объект вручную при помощи лассо. Также этот способ позволяет создать контур, ставя по края объекта точки-маркеры.
• Волшебная палочка. Автоматически выделяет и отделяет основной слой. Если вы работаете с простым однотонным предметом, достаточно кликнуть по нему. Для более сложного выделения зажмите Shift и воспользуйтесь палочкой несколько раз.
• Овал/прямоугольник. Эти два варианта действуют соответственно названию, то есть отделяют от задника участок указанной формы.

Обведите объект по контуру и выберите параметры размытия границ

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

Шаг 5. Установите на фон другую картинку

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

Загрузите новое фоновое изображение

Шаг 6. Сохраните картинку

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

Также вы можете сжать вес картинки без потери качества. Чтобы воспользоваться этой функцией, нажмите «Сохранить JPEG с настройкой качества».

Укажите подходящий формат и мохраните готовую работу

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

Плюсы данного способа:

• Процесс полностью контролируемый, но при этом проходит в полуавтоматическом режиме.
• В программе есть набор клипарта, с помощью которых можно дополнительно украсить коллаж.
• Можно сохранить картинку с любой заливкой, например, сделать белый или красный фон.
• Благодаря размытию границ можно добиться естественного результата.
• ФотоКОЛЛАЖ работает на всех версиях Windows.
• Программа почти не дает нагрузку на процессор.
• Редактор быстро работает даже с крупными файлами в высоком разрешении.

К недостатку можно отнести небольшой тестовый период программы.

Способ 2. Наложение объекта
на новый фон в Paint 3D

Пользователи Windows 10 могут добиться нужной цели при помощи фоторедактора Paint 3D. Получить такой естественный результат, как в предыдущей инструкции, не получится, но если нужно сделать простое наложение, эта программа вполне сгодится. Давайте рассмотрим, как сделать другой фон на фото с ее помощью.

1 Кликните по фотографии правой кнопкой мыши и выберите пункт «Открыть с помощью», затем «Paint 3D». Найдите инструмент «Волшебное выделение» на верхней панели управления.

Программа Paint 3D встроена в ОС Windows 10

Укажите границы главного объекта на фото

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

Сохраните выделенный объект как клипарт в буфере обмена редактора

Расположите готовую наклейку на новом фоне

Преимущества способа:

• Не нужно скачивать и устанавливать сторонние редакторы.
• Волшебное выделение значительно экономит время.

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

Способ 3. Автоматическое удаление
задника на снимке

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

Рабочая область онлайн-сервиса для удаления фона «Remove.bg»

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

1. 1 Откройте сайт remove.bg и загрузите изображение кнопкой «Upload image».
2. 2 Сервис автоматически распознает и удалит задний план.
3. 3 Чтобы отредактировать результат, кликните «Edit».
4. 4 Раскройте вкладку «Erase/restore». Выберите Erase, чтобы убрать ненужные участки на фото, или Restore, чтобы отменить удаление.
5. 5 Чтобы заменить задник, выберите картинку или цвет во вкладке «Background».
6. 6 Нажмите «Download», чтобы экспортировать изображение на жесткий диск.

Преимущество способа – быстрая автоматизированная работа. Крупный минус – в том, что бесплатная версия разрешает скачивать файл в меньшем размере (не более 624х400 пикселей). За скачивание 1 фотографии в HD-качестве придется заплатить 129 рублей либо оплатить ежемесячную подписку.

Способ 4. Монтаж фоновой картинки
в мобильном редакторе

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

Мобильный редактор фотографий «Snapseed»

1. 1 В стартовом окне кликните по иконке плюса. Отыщите изображение, на котором будете менять задний план, и загрузите его в приложение.
2. 2 В нижней панели отыщите кнопку «Инструменты» и выберите опцию «Двойная экспозиция».
3. 3 Нажмите на иконку со знаком плюс в нижней части экрана и добавьте фоновую картинку.
4. 4 В панели инструментов найдите кнопку в виде капли. Продвиньте ползунок прозрачности до упора вправо, чтобы вторая картинка полностью перекрыла оригинал.
5. 5 В верхней части приложения найдите кнопку в виде двух квадратиков со стрелкой. Нажмите на нее и выберите «Посмотреть изменения».
6. 6 Выберите пункт «Двойная экспозиция» и кликните по иконке с кистью. Это откроет редактор для первой загруженной фотографии.
7. 7 Выделите иконку в виде глаза и закрасьте ненужный задний план, оставив только главный объект.
8. 8 Кликните по галочке, чтобы применить изменения, и сохраните изображение в галерею смартфона.

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

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

Подводя итог

Чтобы сменить фон на фото без фотошопа и добиться максимально естественного результата, потребуется найти подходящий софт. Самым универсальным вариантом среди перечисленных можно считать программу ФотоКОЛЛАЖ. С ней вы не будете зависеть от скорости интернета, вам не нужно загружать личные фотографии на чужие сервера, а полученное изображение будет радовать высоким качеством. Кроме того, в приложении можно создать открытку с фотографиями и правильно сделать коллажи, которые украсят стены вашего дома или социального аккаунты.

Как работать с фоновыми рисунками в CSS

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

В этой статье мы детально разберем работу с фоновыми рисунками на сайте средствами CSS, а также немного затронем HTML.

Работа с фоном в CSS

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

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

background-color

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

Применить свойство мы можем, например, к тегу <body>. В данном случае изменится фон всей страницы. Сделать мы это можем сразу внутри HTML-кода с добавлением тега <style></style> либо напрямую в CSS. Я пойду вторым путем, предварительно подключив CSS в HTML с помощью строчки <link rel="stylesheet" href="main.css">, где href – адрес местоположения CSS. В моем случае он находится в той же папке, что и HTML, поэтому я сразу указываю название файла.

Итак, подключив CSS, прописываем в него код:

Для наглядности я также в HTML добавил небольшой текст. Код выглядит следующим образом:

Таким образом получаем следующую страницу:

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

background-image

С помощью этого свойства можно загрузить фоновое изображение. Мы можем его применить как ко всей странице, так и к отдельному блоку. Если вы хотите, чтобы картинка не занимала всю область страницы, то добавьте в HTML строчку <div где class – любое название. Класс нам потребуется для того, чтобы мы могли к нему обратиться через стили.

Вот как я обращаюсь к этому классу в CSS:

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

1. В первой строчке я указываю ключевое свойство, с помощью которого добавляю фоновое изображение к классу «img» – небольшому блоку на сайте. В скобках указываю его адрес. Так как картинка находится в той же директории, прописывается только ее название.
2. Во второй строчке я делаю так, чтобы изображение не повторялось.
3. В третьей делаю так, чтобы картинка была по центру.
4. Четвертая строчка масштабирует изображение как можно больше с сохранением пропорций изображения.
5. Строки 5 и 6 нужны для того, чтобы задать высоту и ширину блока. Без этого мы попросту не увидим добавляемую картинку.

В итоге получаю следующее:

background-repeat

Если добавить такое свойство, то изображение будет повторяться.

Оно может иметь несколько значений:

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

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

Обратите внимание, что я также добавил свойство «background-size» – с его помощью я сделал размер фотографии на 80% меньше, чтобы изображение не расползалось на весь экран.

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

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

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

• background-position: 50% 15%; – изображение располагается по центру по горизонтали и на 15% отступает сверху;
• background-position: 25px 17px; – отступ изображения вниз на 25 пикселей от верхнего края и на 17 пикселей вправо от левого.

linear-gradient

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

Вот как это выглядит на примере:

В первой строке указывается откуда будет начинаться градиент. В данном случае – снизу-вверх. Также можно прописать значения to top, to bottom и to left.

На странице это выглядит так:

background-size

В изменении размера картинки поможет свойство background-size.

В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и другие.

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

Например, вы загрузили на сайт картинку с размером 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 400×400 px. Вот так будут выглядеть параметры background-size:

Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки:

Также мы можем указать значение contain – в таком случае фоновое изображение масштабируется таким образом, что оно полностью заполняет блок или всю страницу.

Альтернативный текст

Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик или другую иконку – это зависит от браузера. Чтобы такого не было, мы можем дать подсказку, описать то, что изображено на картинке. Для этого используется параметр alt, который прописывается к тегу <img> в HTML-файле. Мы еще не говорили об этом, но здесь нет ничего сложного. Картинка загружается аналогично тому, что мы делали при использовании свойства «background-image».

Таким образом, если мы хотим добавить картинку к body, необходимо прописать следующие строчки кода:

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

Изображение в качестве ссылки

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

Для этого в коде необходимо добавить тег <a href=". "></a>, где href – ссылка на страницу. Внутри этого тега необходимо добавить картинку.

В результате должно получиться следующее:

Создание полупрозрачного фона в CSS

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

Например, чтобы сделать изображение на 50% тусклее, в CSS необходимо прописать следующее:

Значение opacity прописывается к классу так же, как мы это делали с другими свойствами.

Вместо заключения

Использование фонового изображение на сайте помогает разбавить текстовый контент, а также показать пользователю на живых примерах то, с чем он имеет дело. В этой статье мы рассмотрели основные способы добавления картинок на примере HTML и CSS. Достаточно воспользоваться одним свойством background-image либо тегом <img>, и изображение отобразится на странице.