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

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

Как растянуть фон на всю ширину окна?

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

Как добавить фоновый рисунок на веб-страницу?

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .

Можно ли сделать анимированный фон?

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

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

Как поместить фоновый рисунок в правый нижний угол страницы?

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

Как сделать, чтобы фон не повторялся?

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

Как сделать, чтобы фон повторялся только по вертикали?

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

2 голоса

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

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

Выбор картинки

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

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

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

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

Если вас интересуют и отсутствие юридических последствий за их использование, то я рекомендую поискать на сайте Pixabay.com .

Html

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

Итак, вы можете работать в блокноте, я предпочитаю NotePad++. В нем работать гораздо удобнее: код дописывают за тебя, теги подсвечиваются. Программа бесплатная, и весит около 3 Мб. Очень рекомендую, особенно если вы новичок.

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

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

<html > <head > <title > Background-image</ title > </ head > <body background = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png" > </ body > </ html >

Хотелось бы отметить для новичков, вот какой момент. Если вы берете изображение с pixabay, то ссылку вставлять нужно не на страницу с картинкой, а открыть рисунок в соседней вкладке.

Копируйте именно этот URL.

Сохраните документ. Не забывайте, что если вы используете блокнот, то нужно использовать расширение .html . Просто назовите документ, к примеру, back.html . В противном случае он сохраниться как текстовый документ и браузер просто не поймет, что ему нужно делать.

Готово, страница залита другим цветом.

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

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

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

Не согласны со мной? Могу предложить альтернативу. Книга Элизабет и Эрика Фримен «Изучаем HTML, XHTML и CSS ». Не очень скучный бестселлер и выпустился не так давно, в 2016 году. Информация устареть еще не успела.

CSS

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

CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:

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

Для тех, кто хочет знать лучше

При помощи css вы можете растянуть background image , сделать так, чтобы оно не повторялось, добавить gif-анимацию и многое другое.

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

Хотите научиться правильно писать сайты? Я рекомендую вам изучать языки программирования . Могу посоветовать курс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи ». Мне очень нравится этот автор. Я не проходил конкретно этот курс, несколько лет назад было уже что-то аналогичное, но менее современное.

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

Кстати, вместе с этим курсом вы получаете 7 бонусов: основы html и css Андрея Бернацкого, верстка для начинающих, создание лендинг пейдж за вечер и многое другое. Перед тем как заниматься серьёзным обучением, пощупайте бесплатный курс «Практика HTML5 и CSS3 ».

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

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

Основные теги HTML для создания фона

Итак, переходим к вопросу, фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

1. Написать атрибутом тега.
2. Через CSS стиль в HTML коде.
3. Написать CSS стиль в отдельном файле.

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

1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= "Название_папки/Название_картинки.расширение")(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background="Images/Picture.jpg")… (/body).
2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body style="background: url("../Images/Picture.jpg")").
3. И третий способ записи производится в двух файлах. В документе с названием index.htm в записывается такая строчка: (head)(link rel="stylesheet" type="text/css" href="Путь_к CSS_файлу")(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg")}.

Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.

Способы растягивания фоновой картинки на ширину окна

Представим наш экран в процентном виде. Получается, что вся ширина и длина экрана будет составлять 100% х 100%. Нам необходимо растянуть картинку на эту ширину. Добавим к записи изображения в файл style.css строку, которая и будет растягивать изображение на всю ширину и длину монитора. Как это записывается в CSS стиле? Все просто!

background: url(Images/Picture.jpg")

background-size: 100%; /* такая запись подойдет для большинства современных браузеров */

Вот мы и разобрали, как сделать картинку фоном в html на весь экран. Есть еще способ записи в файле index.htm. Хоть этот метод и устаревший, но для новичков необходимо его знать и понимать. В теге (head)(style) div { background-size: cover; } (/style) (/head) эта запись означает, что мы выделяем специальный блок для фона, который будет позиционироваться по всей ширине окна. Мы рассмотрели 2 способа, как сделать фон сайта картинкой html, чтобы изображение растягивалось на всю ширину экрана в любом из современных браузеров.

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

Если вы решили использовать картинку в качестве фона будущего веб-ресурса, тогда вам просто необходимо узнать, как его сделать неподвижным, чтобы он не растягивался в длину и не портил эстетичный вид. Достаточно просто с помощью прописать это небольшое дополнение. Вам необходимо в файле style.css дописать одну фразу после background: url(Images/Picture.jpg") fixed; или вместо нее добавить после точки с запятой отдельную строчку - position: fixed. Таким образом, ваш фоновый рисунок станет неподвижным. Во время прокрутки контента на сайте, вы увидите, что текстовые строки двигаются, а фон остается на месте. Вот вы и научились, как в html сделать фон картинкой, несколькими способами.

Работа с таблицей в HTML

Многие неопытные веб-разработчики, сталкиваясь с таблицами и блоками, часто не понимают, как в html сделать картинку фоном таблицы. Как и все и CSS стиля, этот язык веб программирования достаточно простой. И решением такой задачи будет написание пары строк кода. Вы уже должны знать, что написание табличных строк и столбцов обозначается соответственно как теги (tr) и (td). Чтобы фон таблицы сделать в виде изображения, необходимо дописать к тегу (table), (tr) или (td) простую фразу с указанием ссылки на картинку: background = URL картинки. Для наглядности приведем пару примеров.

Таблицы с картинкой вместо фона: HTML примеры

Нарисуем таблицу 2х3 и сделаем ее фоном картинку, сохраненную в папке “Images”: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td)3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Так наша таблица будет закрашена в фон картинки.

Теперь нарисуем эту же табличку размерами 2х3, но вставим картинку в столбики под номером 1, 4, 5 и 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2(/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5(/td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). После просмотра видим, что фон появляется только в тех ячейках, в которых мы прописали, а не во всей таблице.

Кроссбраузерность сайта

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

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

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

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

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

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

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

Какие же размеры должны быть у фона для домашнего использования? Если планируется предметная съемка, то объемы должны исходить из размеров объекта, если снимать будут ребенка – высота от 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 мм и разную плотность, соответственно. Для его закрепления понадобится основа из дерева или металла, так как обычные скрепки или стяжки его не удержат.

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

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

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

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

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

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

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

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

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

Фон сайта #55D52B

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Фон сайта rgb(23,113,44)

Фон сайта green

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

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

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

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

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

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

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

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

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

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

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

• Ключевым словом (top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения (пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

• scroll;


• fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких «метров » займет много времени?

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

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

Средства CSS

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