Як на сайті вставити малюнок в малюнок

Існує спосіб помістити одне зображення в інше без будь-яких змін на сторінках сайту. Для цього достатньо відредагувати зберігається на сервері фонову картинку - за допомогою будь-якого графічного редактора помістити на неї зображення переднього плану. Якщо цей спосіб вам підходить, почніть з визначення місця зберігання і назви файлу з фоновою картинкою. Це можна зробити, знайшовши її в вихідному коді сторінки або відкривши в окремій вкладці і подивившись повний шлях в адресному рядку браузера.

З використанням файл-менеджера системи управління сайтом або ФТП-клієнта скачайте потрібний файл в комп`ютер і відкрийте в будь-якому графічному редакторі - наприклад, в який встановлюється разом з операційною системою Windows додатку Paint.

Помістіть поверх фону картинку переднього плану - в Paint для цього треба зі списку «Вставити» на вкладці «Головна» вибрати пункт «Вставити з» і в діалозі знайти потрібний файл. Потім зафіксуйте його вставленого зображення на існуючому тлі (потягати його мишкою) і збережіть результат (Ctrl + S).

Завантажте назад відредаговану картинку, перезаписавши стару. На цьому процедура буде завершена.

Описаний спосіб незручний в тому випадку, коли вставляються картинки потрібен час від часу міняти. Тоді використовуйте можливості мови HTML - наприклад, зробіть картинку заднього плану фоном того елемента сторінки, в який буде вміщено зображення переднього плану. Таким елементом-контейнером може служити, скажімо, шар (div). Зробити велику з картинок його фоном потрібно з використанням опису стилів - атрибута style тега div. Порожній контейнер в HTML-коді може виглядати так:

У дужках вкажіть адресу та назву файлу фонового зображення на вашому сайті.

Складіть тег зображення переднього плану (img), задавши в ньому за допомогою того ж атрибута style величини відступів від країв контейнера з фоном. наприклад:

Тут атрибути width і height задають розміри зображення, а чотири числа після padding вказують відступи від країв контейнера в пікселях, починаючи з верхнього (50) і далі за годинниковою стрілкою (60 - справа, 70 - знизу, 80 - зліва).

Помістіть тег img в контейнер:

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