Die Fähigkeiten der Markup-Sprache – HTML – und Cascading Style Sheets – CSS – ermöglichen es Ihnen, ein Bild auf viele Arten in ein anderes einzufügen. Dies erfordert natürlich einige Kenntnisse im Webseiten-Layout und Sie müssen eine bestimmte Methode basierend auf dem vorhandenen Code auswählen. In einigen Fällen können Sie jedoch auf die Bearbeitung des Quellcodes verzichten.
Anleitung
Schritt 1
Es gibt eine Möglichkeit, ein Bild in ein anderes einzufügen, ohne die Seiten der Site zu ändern. Dazu reicht es aus, das auf dem Server gespeicherte Hintergrundbild zu bearbeiten - verwenden Sie einen beliebigen Grafikeditor, um das Vordergrundbild darauf zu platzieren. Wenn diese Methode für Sie funktioniert, legen Sie zunächst den Speicherort und den Namen der Hintergrundbilddatei fest. Dies kann erfolgen, indem Sie es im Quellcode der Seite finden oder indem Sie es in einem separaten Tab öffnen und den vollständigen Pfad in der Adressleiste des Browsers anzeigen.
Schritt 2
Laden Sie die gewünschte Datei mit dem Dateimanager des Content-Management-Systems oder FTP-Client auf Ihren Computer herunter und öffnen Sie sie in einem beliebigen Grafikeditor - beispielsweise in der mit Windows installierten Paint-Anwendung.
Schritt 3
Platzieren Sie das Vordergrundbild über dem Hintergrund - in Paint müssen Sie dazu den Eintrag "Einfügen von" aus der Dropdown-Liste "Einfügen" auf der Registerkarte "Startseite" auswählen und im sich öffnenden Dialog die gewünschte Datei suchen. Passen Sie dann die Position des eingefügten Bildes auf dem vorhandenen Hintergrund an (mit der Maus ziehen) und speichern Sie das Ergebnis (Strg + S).
Schritt 4
Laden Sie das bearbeitete Bild zurück und überschreiben Sie das alte. Damit ist das Verfahren abgeschlossen.
Schritt 5
Das beschriebene Verfahren ist unpraktisch, wenn die eingefügten Bilder von Zeit zu Zeit geändert werden müssen. Dann nutzen Sie die Möglichkeiten der HTML-Sprache - machen Sie beispielsweise das Hintergrundbild zum Hintergrund des Seitenelements, in dem das Vordergrundbild platziert wird. Ein solches Containerelement kann beispielsweise eine Schicht (div) sein. Um ein großes Bild zum Hintergrund zu machen, müssen Sie die Stilbeschreibung verwenden - das Stilattribut des div-Tags. Ein leerer Container im HTML-Code könnte so aussehen:
Geben Sie in Klammern die Adresse und den Namen der Hintergrundbilddatei auf Ihrer Site an.
Schritt 6
Erstellen Sie ein Vordergrundbild-Tag (img) und verwenden Sie das gleiche Stilattribut, um den Abstand von den Kanten des Hintergrundcontainers festzulegen. Beispielsweise:
Hier legen die Breiten- und Höhenattribute die Abmessungen des Bildes fest, und die vier Zahlen nach dem Auffüllen geben das Auffüllen in Pixeln von den Rändern des Containers an, beginnend oben (50) und weiter im Uhrzeigersinn (60 - rechts, 70 - unten, 80 - links).
Schritt 7
Platzieren Sie das img-Tag in einem Container:
Schritt 8
Fügen Sie die erstellten Zeilen zum Quellcode der Seite hinzu und passen Sie dann durch Ändern der Einrückungen die Position des eingefügten Bildes vor dem Hintergrund des Hintergrundbilds an.
