The capabilities of the page markup language - HTML - and cascading style sheets - CSS - allow you to place one image within another in many ways. Of course, this requires some skills in web page layout, and you need to choose a specific method based on the existing code. However, in some cases, you can do without editing the source code.
Instructions
Step 1
There is a way to put one image in another without any changes in the pages of the site. To do this, it is enough to edit the background image stored on the server - using any graphics editor, place the foreground image on it. If this method works for you, start by defining the storage location and name of the background image file. This can be done by finding it in the source code of the page or by opening it in a separate tab and looking at the full path in the address bar of the browser.
Step 2
Using the file manager of the content management system or FTP client, download the required file to your computer and open it in any graphics editor - for example, in the Paint application installed with Windows.
Step 3
Place the foreground picture over the background - in Paint for this you need to select the "Insert from" item from the "Insert" drop-down list on the "Home" tab and find the required file in the dialog that opens. Then adjust the position of the inserted image on the existing background (drag it with the mouse) and save the result (Ctrl + S).
Step 4
Load back the edited picture, overwriting the old one. This completes the procedure.
Step 5
The described method is inconvenient when inserted pictures need to be changed from time to time. Then use the capabilities of the HTML language - for example, make the background image the background of the page element in which the foreground image will be placed. Such a container element can be, say, a layer (div). To make a large of the pictures its background, you need to use the style description - the style attribute of the div tag. An empty container in HTML might look like this:
In parentheses, indicate the address and name of the background image file on your site.
Step 6
Create a foreground image (img) tag, using the same style attribute to set the amount of padding from the edges of the background container. For example:
Here, the width and height attributes set the dimensions of the image, and the four numbers after the padding indicate the padding in pixels from the edges of the container, starting at the top (50) and further clockwise (60 - right, 70 - bottom, 80 - left).
Step 7
Place the img tag in a container:
Step 8
Add the created lines to the source code of the page, and then, changing the indents, adjust the position of the inserted image against the background of the background image.
