Руководство как сделать фон

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

Удаление

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

1. Если фон одноцветный с чёткими границами у объекта, который нужно оставить, удобно воспользоваться инструментом «Волшебная палочка». Выделяете им места фона, затем нажимаете Delete, и выделенное удалится, образуя прозрачный фон. Снимаем выделение Ctrl+D.
   
2. Так же при однородном фоне с чёткими границами оставляемого изображения. Если оно выполнено в иных цветах, можно применять инструмент «Фоновый ластик». Им проводите по картинке, начав с места, где есть только фон. Ластик «запомнит» цвета, и сама картинка не будет удалена, даже если вы нечаянно зайдёте потом за границы. Но здесь есть нюансы в настройках. Нужно устанавливать уровень допуска. Если вы поставите допуск 1%, убираться будет строго тот цвет, на который вы кликнете первым, а оттенки его останутся. Если поставить допуск больше, то будет стираться не только цвет, ставший отправной точкой, но и близкие ему оттенки.
   
3. Инструмент «Волшебный ластик» тоже поможет заменить обычный фон на прозрачный. Поставьте нужный допуск (например, 80) и не проводите, а просто кликните в любой точке фона. Весь фон станет прозрачным. Если допуск будет меньше, то удалится только часть.
   
4. Если картинка вся разноцветная и сложная, то нужно выделить объект, который вы хотите сохранить, любым способом (Лассо, Перо). Затем скопировать его Ctrl+C, создать новый файл, проставив параметр «Прозрачный», затем в открывшееся поле перенести скопированную картинку из буфера обмена клавишами Ctrl+V.
5. Сохраняйте картинку в форматах GIF, PNG8 либо PNG24. Учтите: формат JEPG не поддерживает прозрачный фон, преобразуя его в белый.

Изменение

Здесь рассмотрим, как поменять фон в Photoshop, перенеся объект с одной фотографии на другую посредством инструмента «Перо», с последующим корректированием изображения.

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

1. Увеличьте масштаб и выделите изображение, которое нужно перенести на другую картинку. Можно очертить инструментом «Перо», затем контур надо преобразовать в выделение. Для этого кликните правой кнопкой внутри фигуры, в появившемся меню нажмите «Преобразовать выделенную область». Радиус растушёвки поставьте в зависимости от размеров: чем больше выделяемая фигура, тем больше радиус. При средних размерах оптимальная растушёвка — 2 пикселя.
2. Откройте фон, заготовленный заранее.
3. Перетащите на него объект, подтвердите преобразование цветов.
4. Для дальнейшей трансформации нажмите Ctrl+T. Установите нужный размер с помощью точек масштабирования. Чтобы эта операция происходила пропорционально, зажмите клавишу Shift. Когда нужный размер выбран, нажмите Enter для применения трансформации.
5. Чтобы вписать объект в общую картину, нужно создать тень. Действуем в следующем порядке:
   • Перейдите на фоновый слой, создайте над ним новый.
   • Возьмите чёрную мягкую кисть приблизительно в 35 пикселей размером.
   • Прорисуйте на новом слое тень у ног объекта. Уменьшите прозрачность до 55-60%. Лишнюю тень уберите «Ластиком».
   • Создайте ещё один слой для тени от самой фигуры.
   • Зажмите клавишу Ctrl, щёлкните по слою с объектом, создав его выделение.
   • Убедитесь, что активным является слой, который вы создали дополнительно для тени. Залейте этот слой чёрным.
   • Нажмите CTRL+D, отменяя этим выделение.
   • Нажмите CTRL+T для трансформации тени.
   • Кликните правой кнопкой мыши внутри области трансформации, выберите в контекстном меню функцию «Искажение».
   • Наклоните тень в зависимости от имеющегося на фоне источника света.
   • Если источников света несколько, продублируйте этот слой клавишами Ctrl+J и расположите вторую тень, ещё раз нажав клавиши Ctrl+T и «Искажение» уже для трансформации этого слоя.
   • Выделите оба слоя с тенями с помощью Ctrl и объедините их, выбрав «Объединить слои» в контекстном меню, появившемся после нажатия правой кнопки мыши.
   • Измените непрозрачность получившегося объединённого слоя до 35–40%.
6. Для придания реалистичности перейдите в «Фильтры» — «Размытие» — «Размытие по Гауссу». Выберите уровень размытия, нажимаем Ок.
7. Скорректируйте цвета, чтобы объект вписался в общую картину.
   • Создайте корректирующий слой «Кривые». Изогните кривую для коррекции. Чтобы кривая применялась только к объекту, а не к фону, зажмите Alt и подведите курсор в положение между слоями.
   • Создайте корректирующий слой «Цветовой баланс». Внесите нужные изменения, передвигая ползунки. Вначале настройте «Средние тона», потом «Света».
   • Новый корректирующий слой — «Уровни». Поставьте там необходимые для баланса изменения, не забывая применять все корректировочные слои только к слою с объектом.

Остаётся создать объединённую копию всех слоёв, для чего нажмите Alt+Shift+Ctrl+E. Вы смогли заменить фон, перенеся объект с одного изображения на другое.

Размытие

Если стоит вопрос, как размыть фон в Photoshop, то здесь нужно действовать так.

1. Дублируем изображение на новый слой Ctrl+J.
   
2. Заходим на вкладку «Фильтры» — «Размытие», здесь видим множество вариантов. Можете попробовать разные фильтры. Удобно использовать размытие по Гауссу. Покажем, как дальше работать с этим фильтром.
   
3. Выставляете нужный вам радиус, нажимаете ОК.
4. У вас получилось размыть все изображение. Исправляем это посредством «Маски».
5. Нажимаем кнопку Маска, далее есть два пути:
   • Берём мягкую кисточку с чёрным цветом, устанавливаем удобный размер, проводим по изображению объекта, с которого нужно стереть размытие. Этот способ удобен, когда фон большой, а объект сам маленький.
   • Если, наоборот, у вас объект, который нужно сохранить неразмытым, большой, то удобнее другой использовать способ. После применения фильтра размыть по Гауссу, нажимаем Ctrl+i. Создаём маску, заливаем её чёрным цветом. Затем берём мягкую кисточку, ставим для неё белый цвет и проводим ею по фону, который при этом становится размытым.

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

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

Наглядный пример замены фона

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

Стоит по шагам пройтись по инструкции о том, как выполняется такой приём.

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

Все действия условно делятся на 4 этапа:

• вырезание объекта;
• перенос на новый фон;
• создание тени;
• финишная доработка.

По каждому из этапов стоит пройтись отдельно.

Вырезание объекта

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

Photoshop предлагает сразу несколько инструментов для этого. Одним из самых простых и удобных справедливо считается «Перо».

Для работы с пером нужно учитывать следующие моменты:

• при выборе фото следует поставить первую опорную точку, на которой должно закончиться выделение;
• чем меньше точек будет использовано, тем на самом деле лучше;
• если по выделяемому фото идёт изгиб, нужно поставить точку в его начале и в конце;
• между этими двумя точками ставится по центру ещё одна;
• зажав кнопку Ctrl, аккуратно тяните за центральную точку, тем самым задавая нужный изгиб линии.

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

Остаётся только знаменитость без заднего плана оригинальной фотографии.

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

Но среди всех этих способов именно перо наиболее удобное и универсальное. Если нужно действительно аккуратно выделить объект, лучше вооружиться пером.

Перенос на другой фон

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

Заранее загрузите из сети подходящую фотографию с кирпичной стеной. Далее последовательность будет такая:

• Откройте в Photoshop изображение с кирпичной стеной.
• Вернитесь обратно на вкладку, где была вырезана знаменитость.
• Нажмите комбинацию кнопок Ctrl и T. Сразу после этого нажмите на инструмент под названием «Перемещение».
• Зажимая левую кнопку мышки, перетяните выделенный объект на вкладку, где находится кирпичная стена.
• Подождите, когда программу переключится на эту вкладку, и потяните курсор к холсту. Отпускайте кнопку.
• Чтобы не перетягивать объект, можно воспользоваться альтернативным способом. Для этого следует скопировать объект, и потом его вставить. Проще всего это сделать комбинациями Ctrl и C, а затем Ctrl и V.
• Теперь настройте изображение, чтобы оно гармонично и пропорционально вписалось в фон. При этом лучше зажать кнопку Shift. Это позволит сохранить оригинальные пропорции объекта. Но иногда бывает и так, что меняются размеры самого фона.

Этап перемещения завершён.

Но многие наверняка подметят, что пока «звезда» смотрится не совсем естественно. Потому это придётся подкорректировать.

Создание тени

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

Сделать необходимо следующее:

• по слою, где находится актриса, дважды кликнуть левой кнопкой мышки и открыть его свойства;
• в открывшемся окне поставить метку напротив «Тень»;
• выставить параметры на свой вкус;
  
• подтвердить внесённые изменения, нажав на кнопку «ОК».

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

Финишная обработка

На заключительном этапе нужно ещё немного подкорректировать полученное изображение.

Тут рекомендуется сделать следующее:

• Перейти самый верхний слой изображения, и нажать здесь на кнопку для создания корректирующего слоя. В открывшемся списке вариантов выбрать пункт «Цветовой тон/Насыщенность».
• Нажать на клавишу привязки и выставить необходимые параметры. Нужно добиться того, чтобы между фоновым изображением и самой знаменитостью разницы практически не было.
  
• Саму кирпичную стену иногда также стоит подкорректировать. Она должна выступать как фон, а не акцентировать на себе всё внимание.
• В палитре слоёв нужно переключиться на фон.
• Тут есть смысл опробовать в деле фильтр под названием «Размытие по Гауссу». Он располагается в группе размытия во вкладке «Фильтры».
• Поставьте радиус размытия около 0,3 единицы, после чего нажмите на «ОК». Поэкспериментируйте, в зависимости от выбранного фона.
  
• Ещё для фона можно создать корректирующий слой, который называется «Кривые». При его запуске нужно потянуть линию немного вниз. Это позволит сделать фон темнее оригинала.
• Также детали, находящиеся на тёмных участках фотографии, можно сделать более выраженными и заметными. Тут нужно переключиться на верхний слой «Цветовой тон/Насыщенность» и затем создать ещё один корректирующий слой «Кривые».
• Выгибая линию уже вверх, следите за изменениями. Остановитесь в тот момент, когда посчитаете результат оптимальным.
  

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

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

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

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

Параметры фона сайта

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

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

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

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

Скачать файл

Какими параметрами определяется HTML фон страницы.

• Цветовой оттенок HTML фона сайта определяет CSS атрибут background-color, расположенный в теге <body>.
• HTML фонового цвета фона определенных элементов (блок, параграф или табличная ячейка) определяется таким же атрибутом, который размещен внутри соответствующих тегов.
• HTML фон сайта можно определить во внешнем файле .css.
• HTML картинка. Простой способ, как сделать картинку фоном в HTML- использование атрибута background-image и картинки.

Подробнее рассмотрим каждый способ установки фона на страницах сайта.

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

Прежде всего, раскроем особенности изменения фона страниц в HTML.  Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:

<body style=»background-color: #55D52B»>

<p>Фон сайта #55D52B</p>

</body>

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

<body style=»background-color: rgb(51,255,153)»>

<p>Фон сайта rgb(23,113,44)</p>

</body>

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

Рисунок или фотография в качестве фона

Остановимся также и на возможностях языка гипертекста для такой задачи, как сделать изображение фоном в HTML. Существует 3 варианта установки картинок для фона страницы только с применением HTML + CSS (JS не используется). Но сперва определим основные требования к фоновой картинке:

• Изображение должно покрывать всю ширину и высоту страницы сайта.
• В случае необходимости фон может масштабироваться (background растягивается/сжимается с учетом параметров экрана).
• Пропорции изображения сохраняются (aspect ratio).
• Картинка центрируется на странице.
• Фоновой изображение не вызывает скроллов.
• Решение полностью кроссбраузерное.
• Не применяются разные технологии, только CSS

Метод 1

Наиболее простой и прогрессивный способ, как сделать фото фоном в HTML. В этом случае используется свойство CSS3 background-size, в применении к тегу html. Тег body не применяется, потому что он имеет большую высоту, которая определяется высотой окна браузера. Вначале нужно установить центрированную и фиксированную картинку фона, а потом изменить ее размер с помощью background-size: cover.

html {

background-image: url(images/background.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Copy

Этот способ можно использовать в любой версии Chrome, Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Метод 2

В этом варианте применяется элемента img. Его размер можно изменить с учетом размеров браузера. Для растягивания картинки фона на полный экран следует задать для фона min-height и width с параметром 100%.

Если установить min-width со значением, которое аналогично ширине изображения, то фон будет сжиматься меньше оригинального размера изображения. Для ситуации, когда окно уже ширины картинки, чтобы выровнять бэкграунд по центру устанавливают media query.

<img src=»/images/background.jpg» class=»background» />

Copy

img.background {

min-height: 100%;

min-width: 640px;

width: 100%;

height: auto;

position: fixed;

top: 0;

left: 0;

/* Определяется размером картинки */

@media screen and (max-width: 640px){

img.bg {

left: 50%;

margin-left: -320px;

}

}

}

Данный метод эффективен любых версиях обычных браузеров (Chrome, Opera, Firefox, Safari), IE 9+

Метод 3

Еще один способ, как сделать изображение фоном в HTML. Нужно закрепить изображение <img /> на странице вверху слева и растянуть его, используя свойство min-width и min-height 100% (необходимо сохранить соотношение сторон).

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

<div class=»background»>

<img src=»/images/background.jpg» />

</div>

Copy

div.background {

position: fixed;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

}

img {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

min-width: 50%;

min-height: 50%;

}

Данный метод также может использоваться в хороших браузерах и IE 8+.

Создание текстурного фона

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

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

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

К примеру, чтобы установить темный фона для страницы заходим в «Фотошоп» и создаем картинку в форме полоски, длина которой 1,2 тыс. пикселей, а шириной 15 пикселей. После этого используем простой черно-белый градиент, а затем сформированную текстуру устанавливаем на сайт:

<body style=»background-image: url(1.png);color: rgb(0,51,204)»>

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

body {

background-color: #537759;

background-image: url(images/pattern.png);

}

Как вы видите, в таком коде присутствует параметр по установке оттенка (зеленый) и параметр, который подключает зеленую текстуру.

Установка фона с помощью градиента

Рисунки, подключенные с использованием css функций, могут повторяться по вертикали, и по горизонтали. Эта особенность дает нам еще один вариант, как сделать градиент фон в HTML. Для начала создайте градиент шириной 1 мегапиксель, сохраните его в качестве рисунка и выгрузите на хостинг. Теперь для установки фона нужно в код внести строки:

body {

background-color: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

}

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

Изменение вида и цвета текста

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

<strong> </strong> — такие метаданные применяют, чтобы выделить текст или его часть жирным шрифтом. Можно использовать и тег (<b> </b>).

<em>  </em> — таким способом можно сделать выделение курсивом.

<u> </u> — в этом случае получим подчеркивание выделенного фрагмента.

<s> </s> — тег для перечеркивания текста.

<SUP>  </SUP> — устанавливает верхний индекс (х2)

<SUB>  </SUB>  — таким образом создается нижний регистр (Н2О)

<hr> — применяем, если нужно сделать вставку в виде горизонтальной линии.

<font>  </font>  — такие метаданные меняют цвет, размер текста и стиль шрифта.

К примеру, вы решаете, как сделать новый цвет текста в HTML. Чтобы вместо черного шрифта получить зеленый или красный, для тега <body> применяется атрибут text. Чтобы задать цвет текста устанавливаем название оттенка <body text=»green»> или цифровой код <body text=»#cc0000″> (красный цвет). К примеру:

<html>

<head>

<title>для изменения цвета устанавливаем атрибут text</title>

<meta http-equiv=»content-type» content=»text/html; charset=Windows-1251″>

</head>

<body text=»green»>

Потом идет текстовый блок страницы, таблицы, картинки и т.д.

</body>

</html>

После таких изменений текст получится зеленым.

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

<html>

<head>

<title>HTML фон</title>

</head>

<body style=»color:Yellow; background-color:#66cc66″>

<h1>Заголовок первого уровня</h1>

<p>1-й параграф</p>

<p>2-й параграф</p>

<p style=»color:#ffffff»>3-й параграф</p>

</body>

</html>

В строке style=»color:Yellow; background-color:#66cc66″  теге <body> меняет фоновый цвет HTML страницы на зеленый, а текст получится желтым.

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

<p style=»background-color:#ff9900″ align=»center»>Первый параграф</p>

<p style=»background-color:#417ed0″ align=»center»>Второй параграф</p>

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

Ни для кого не секрет, что картинки – это неотъемлемая часть любого сайта, будь то небольшой одностраничник или крупный интернет-портал. Они встраиваются с помощью 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, прописываем в него код:

body{

            background-color: yellow;

}

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

<!DOCTYPE html>

<html lang="en">

<head>

            <meta charset="UTF-8">

            <link rel="stylesheet" href="main.css">

            <title>Document</title>

</head>

<body>

            <p>

                        Hello!

            </p>

</body>

</html>

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

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

background-image

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

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

.img{

            background-image: url("alondra-lucia--_os35-xQjc-unsplash.jpg");

            background-size: no-repeat;

            background-position: center;

            background-size: cover;

            height: 400px;

            width: 400px;

}

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

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 – изображение не повторяется.

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

body{

            background-image: url("alondra-lucia--_os35-xQjc-unsplash.jpg");

            background-repeat: repeat-x;

            background-position: center;

            background-size: 20%;

}

Обратите внимание, что я также добавил свойство «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.

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

.img{

            background: linear-gradient(to top, #2639fa, #c9d1ff);

            width: 400px;

            height: 400px;

}

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

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

background-size

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

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

background-size: ширина высота;

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

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

background-size: 400px 400px;

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

background-size: 400px;

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

background-size: contain;

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

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

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

<body>

            <img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">

</body>

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

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

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

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

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

<body>

            <a href="vk.com"></a>

            <img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">

</body>

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

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

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

opacity: 0.5;

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

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

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