Предметы интерьера и подручные средства для создания фотофона. Материалы, подходящие для создания фотофонов

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

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

Фон для домашней фотосессии

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

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

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

Какие же размеры должны быть у фона для домашнего использования? Если планируется предметная съемка, то объемы должны исходить из размеров объекта, если снимать будут ребенка – высота от 1,5 метров, ширина от 1 метра, чем больше, тем дальше фотограф может отойти.

Опять-таки, ребенок новорожденный и ребенок в 14 лет требуют разного количества пространства, это нужно тоже учитывать. Для взрослого человека высота фона будет уже от 2 метров, а ширина – от 1,5 метров.

В домашних съемках фоны требуются для празднования дня рождения или годовщины свадьбы в домашних условиях или в кафе. Последние 3-4 года популярно иметь фотостену или зону для съемок на празднике, которая привлекает внимание гостей и позволяет сделать памятные снимки. Надо учесть количество гостей в кадре одновременно – на 5-7 человек ширина фона уже будет от 3 метров и конструкция понадобится более прочная и устойчивая.

Фон для свадебной фотосессии

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

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

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

Гости могут сфотографироваться в зоне. Так как свадебный вариант подразумевает съемку взрослых людей, то лучше если он будет шириной от 3 метров, а в высоту 2 – 2,5 метров.

Фон для предметной съемки

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

Особенность съемки в положении объекта и фотоаппарата – товар лежит на фоне, а свет и объектив находится сверху.

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

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

Фоны переносные, на стойках

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

Они предлагаются в разных размерах, высота от 2 до 4,5 метров, а ширина от 2 метров, оптимально 3,8 – 4,1 м.

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

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

Система установки фонов

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

Приводить в движение валики с фонами можно вручную, по принципу жалюзи, или автоматически, с помощью моторчика и пульта ДУ. На систему могут быть установлены до 6 фонов одновременно, они находятся в скрученном состоянии, при необходимости нужный опускается. Ширина всей конструкции от 2 метров, рулоны с фонами можно заменять.

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

Фотофон на стене своими руками

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

Лайт бокс своими руками

Light-box – это специальный коробок для предметной съемки, который можно сделать своими руками. Главная идея лайт-бокса – это отсутствие теней от предмета, благодаря рассеиванию подаваемого света. Конструкция несложная, для ее создания вам понадобятся:

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

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

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

  Источники света, нужного вам оттенка и мощности;

  Собственно, фотоаппарат, который нужно настроить на предметную съемку и проверить баланс белого по ватману перед началом.

Циклорама – фон для съемки своими руками

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

В домашней фотостудии для нечастого использования достаточно будет и light-box, но для студийной съемки циклорама необходима. Своими руками ее можно создать, используя те же материалы, только нужно правильно рассчитать углы и переходы, чтобы не было видно границы пола и стены.

Предметы интерьера и подручные средства для создания фотофона

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

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

Материалы, подходящие для создания фотофонов

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

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

Минус ткани в необходимости ее натяжения, если изломы и неровности не задуманы сюжетом. Это достаточно дорогой вариант фона, подходит для крепления любым способом – на стену кнопками, на «ворота» стяжками, рулонами на систему подъема фонов. В специализированных магазинах предлагается широкий выбор тканевых фотофонов с различными тематическими рисунками и композициями.

Бумажные фоны

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

Спанбонд

Пластик

• Часто используется, в качестве основы для создания фона. Он прочный, плотный и хорошо держит тяжелые декоративные элементы. Такой материал продается на метраж пластинами, имеет толщину от 1 мм до 7 мм и разную плотность, соответственно. Для его закрепления понадобится основа из дерева или металла, так как обычные скрепки или стяжки его не удержат.

Баннерная пленка

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

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

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

Можно ли обойтись средствами html при задании фона?

Сразу скажу, что нет. Вообще html не создан для того, чтобы оформлять веб-страницы. Это просто очень неудобно. Например, там есть атрибут bgcolor, с помощью которого можно задавать фоновый цвет, но это очень неудобно.

Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.

Как задать фон через css?

Итак, прежде всего вам нужно определиться с тем, какому элементу нужно задать фон. То есть нам нужно найти селектор, к которому мы будем писать правило. Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д. Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.

После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.

body{ background-color: #D4E6B3; }

Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.

Картинка в качестве фона

В качестве картинки я буду использовать маленький значок языка html:

Создадим пустой блок с идентификатором:

Зададим ему явные размеры и фон:

#bg{ width: 400px; height: 250px; background-image: url(html.png); }

Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:

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

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

Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:

Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;

Repeat-x – повторяется только по оис x;

Repeat-y – повторяется только по оси y;

No-repeat – не повторяется вообще;

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

background-repeat: repeat-x;

Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.

Отлично, на этом уже можно заканчивать, так как это базовые возможности работы с фоном, но я вам покажу еще 2 свойства, которые позволяют получить вам больше возможностей в управлении.

С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.

Позиция фона

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

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

background-position: right top;

То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:

background-position: 50% 50%;

Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.

Ну и наконец, прописывать позицию можно в пикселях. Все то же самое, только вместо % будет px. В некоторых случаях может понадобиться и такое позиционирование.

Сокращенная запись

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

background: #333 url(bg.jpg) no-repeat 50% 50%;

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

Управляем размером фоновой картинки

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

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

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

background-size: 80% 50%;

Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.

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

Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.

Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.

Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.

Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.

В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.

Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится. Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину. Тогда на самых широких экранах она будет в своем натуральном размере, а на других просто будет потихоньку обрезаться, но при этом, при грамотном подборе фоновой картинки, на внешний вид сайта это не повлияет.

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

Полупрозрачный фон с помощью css

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

Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.

Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);

Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.

В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.

Фон для сайта или отдельного блока

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

Body{ Background-color: white; }

То есть мы обращаемся к тегу body , который представляет всю нашу страничку. Для задания цвета фона используется свойство background-color . Но что, если вам нужно задать в качестве фона рисунок, а не сплошной цвет? Тогда стоит написать так:

Body{ Background-image: url(путь к рисунку.расширение рисунка) }

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

Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.

И вот для него стили:

#ct{ Background-image: url(comp.png); width: 600px; height: 400px; }

Вот что у нас получилось:

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

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

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

• Repeat-x – повторять только по горизонтали
• Repeat-y – только по вертикали

Допишем в свойства нашему графическому фону:

Background-repeat: no-repeat;

Позиция

Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.

Давайте лучше посмотрим на примерах:

Background-position: top right;

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

background-position: 50% 50%;

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

background-position: 70% 20%;

Фон смещен на 70% по горизонтали, и на 20 по вертикали.

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

Закрепление фона

Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию (scroll). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.

Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.

Сокращенная запись всего этого добра

Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:

Background: yellow url(comp.png) no-repeat 20% 100px;

Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).

Много фонов

А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку

Я назвал ее laptop.

И вот код для вставки мультифона:

Background: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; background-color: yellow;

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

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

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