Medien aus einer Webseite extrahieren?

Hi zusammen.

Ich würde gern Medien wie z.B. Bilder aus einer Webseite extrahieren bzw. abspeichern. Ich lerne gerade HTML/CSS und dachte es geht einfach, indem ich den Quellcode nach dem entsprechenden Bild durchforste, aber auf den meisten Seiten werde ich da nicht fündig.

Die Webseite abzuspeichern inklusive Dateien hilft auch nur selten.

Ich wollte z.B. gern bei dieser Seite hier:
http://onehourleft.de/ueberuns/

das Hintergrundbild speichern. Ich hab bei der Firma einen Gutschein für einen Freund zum Geburtstag bestellt, der kommt aber erst nächste Woche an. Ich dachte, ich bastel ihm einfach aus Bildern von der Homepage kurz nen eigenen Gutschein, als Übergang, bis der echte kommt.

Hab dabei aber festgestellt, dass ich an die Bilder garnicht rankomme. Da ich wie gesagt gerade HTML/CSS lerne, würde mich jetzt darüber hinaus technisch interessieren, wo man die Bilder im Quelltext wohl findet und wie man sie abspeichern kann.

Beste Grüße
Tony

Im Firefox zB Rechtsklick -> Hintergrundgrafik anzeigen:

http://onehourleft.de/wp-content/themes/onehourleft_de/img/bg.jpg

Oder meinst du was anderes?

Die Hintergrundgrafik ist übrigens in diesem Style-Sheet angegeben:

http://onehourleft.de/wp-content/themes/onehourleft_de/style.css?ver=4.1.8

Und zwar hier, erste Zeile:

Ja, genau die meinte ich. Ich nutze aber Chrome, der hat die Funktion leider nicht.

Danke aber fürs Suchen im Quellcode. Das wäre mir nicht aufgefallen. Ich kenne zwar den CSS-Befehl für das Hintergrundbild, aber die Anweisung :url("img/bg.jpg") sagt mir leider garnichts.

ist der verweis wo das bild abgelegt ist

ist zwar schon knappe 10 jahre her, sollter aber das root verzeichnis sein, wo die ordnerstruktur für die ganze website hinterlegt ist.

MrTony schrieb:

Ich lerne gerade HTML/CSS und dachte es geht einfach, indem ich den Quellcode nach dem entsprechenden Bild durchforste, aber auf den meisten Seiten werde ich da nicht fündig.

Zum Vergrößern anklicken....

Mir fallen spontan 3 Wege ein, wie man ein Bild einbinden kann: klassisch per IMG-Tag im HTML, per CSS-Style-Referenz oder gar per Javascript, sodass man ein HTML-Element nachträglich manipuliert.

Ein weiterer Weg, der ohne Programmierkenntnisse zum Ziel führt: Starte im Browser die Entwickler-Tools (bei IE und FF dazu die Taste F12 drücken), aktiviere den Netzwerk-Monitor und mach einen Reload der Seite. Dann siehst Du schön, wie die einzelnen Teile einer Website (HTML, CSSs, Images, Favicon, ...) beim Server angefragt und übertragen werden.

Ich nutze aber Chrome, der hat die Funktion leider nicht.

Zum Vergrößern anklicken....

Dann wird's mal Zeit zum Installieren. Eine Webseite sollte sowieso immer mit den gängigsten Browsern gegengetestet werden..

Natürlich hat Chrome diese Funktion auch von Haus aus!

Umbel schrieb:

Natürlich hat Chrome diese Funktion auch von Haus aus!

Zum Vergrößern anklicken....

Und wo finde ich die Funktion?