Инструкция
1
Существует способ поместить одно изображение в другое без каких-либо изменений в страницах сайта. Для этого достаточно отредактировать хранящуюся на сервере фоновую картинку - с помощью любого графического редактора поместить на нее изображение переднего плана. Если этот способ вам подходит, начните с определения места хранения и названия файла с фоновой картинкой. Это можно сделать, найдя ее в исходном коде страницы или открыв в отдельной вкладке и посмотрев полный путь в адресной строке браузера.
2
С использованием файл-менеджера системы управления сайтом или ФТП-клиента скачайте нужный файл в компьютер и откройте в любом графическом редакторе - например, в устанавливаемом вместе с ОС Windows приложении Paint.
3
Поместите поверх фона картинку переднего плана - в Paint для этого надо из выпадающего списка «Вставить» на вкладке «Главная» выбрать пункт «Вставить из» и в открывшемся диалоге найти нужный файл. Затем отрегулируйте положение вставленного изображения на существующем фоне (потаскайте его мышкой) и сохраните результат (Ctrl + S).
4
Загрузите обратно отредактированную картинку, перезаписав старую. На этом процедура будет завершена.
5
Описанный способ неудобен в том случае, когда вставляемые картинки требуется время от времени менять. Тогда используйте возможности языка HTML - например, сделайте картинку заднего плана фоном того элемента страницы, в который будет помещено изображение переднего плана. Таким элементом-контейнером может служить, скажем, слой (div). Сделать большую из картинок его фоном нужно с использованием описания стилей - атрибута style тега div. Пустой контейнер в HTML-коде может выглядеть так:
<div style="background: url(http://kakprosto.ru/bg.jpg)"></div>
В скобках укажите адрес и название файла фонового изображения на вашем сайте.
<div style="background: url(http://kakprosto.ru/bg.jpg)"></div>
В скобках укажите адрес и название файла фонового изображения на вашем сайте.
6
Составьте тег изображения переднего плана (img), задав в нем с помощью того же атрибута style величины отступов от краев контейнера с фоном. Например:
<img src="http://kakprosto.ru/pic.jpg" width="200" height="100" style="padding: 50px 60px 70px 80px " />
Здесь атрибуты width и height задают размеры изображения, а четыре числа после padding указывают отступы от краев контейнера в пикселах, начиная с верхнего (50) и далее по часовой стрелке (60 - справа, 70 - снизу, 80 - слева).
<img src="http://kakprosto.ru/pic.jpg" width="200" height="100" style="padding: 50px 60px 70px 80px " />
Здесь атрибуты width и height задают размеры изображения, а четыре числа после padding указывают отступы от краев контейнера в пикселах, начиная с верхнего (50) и далее по часовой стрелке (60 - справа, 70 - снизу, 80 - слева).
7
Поместите тег img в контейнер:
<div style="background: url(http://kakprosto.ru/bg.jpg)">
<img src="http://kakprosto.ru/pic.jpg" width="200" height="100" style="padding: 50 60 70 80" />
</div>
<div style="background: url(http://kakprosto.ru/bg.jpg)">
<img src="http://kakprosto.ru/pic.jpg" width="200" height="100" style="padding: 50 60 70 80" />
</div>
8
Добавьте созданные строки в исходный код страницы, а затем, изменяя отступы, отрегулируйте положение вставленной картинки на фоне изображения заднего плана.