Text lässt sich nicht aufdem Hintergrundbild darstellen

  • Guten Abend :)


    Auch nach Benutzung der Suchfunktion konnte ich mein Problem nicht lösen.

    Irgendwo habe ich wohl ein Verständnis Problem und zwar geht es darum, einen Text auf einem Bild darstellen zu lassen(per CSS).


    Das Bild erscheint auch und der Text auch, nur entweder ist das Bild überm Text oder dazwischen oder drunter, aber der Text lässt sich nicht auf dem Bild darstellen.

    Ist das Bild alleine auf einer Seite funktioniert alles, aber sobald eine Navigation dazu kommt mit einem Kopf und Fußbereich, ist sense.


    Ich bin noch ein blutiger Anfänger und habe das "1 Spalten Layout" auf der Seite hierfür benutzt, um ein bisschen rumzuprobieren .

    Im Inhaltsbereich habe ich ein Bild eingefügt, also genau zwischen Header und Footer.

    Wenn ich mit dem Befehl "Position:absolute" arbeite, wird alles verdeckt trotz des "z-index" setzens :( Der z-index Behfel ist nicht im Quellcode.


    Bitte um Hilfe oder Hilfestellung :)


    LG scotch


  • Herzlich willkommen im Forum - mir ist nicht klar, in welchem Bereich. In dem Quellcode finde ich zwar einen Kopfbereich mit #kopfbereich und im CSS ein Bild darfür aber wo ist der Text? Oder ist etwas anderes gemeint?


    Oder meinst du den Bereich:

    Code
    1. <div>
    2. <img id="hintergrund" src="bilder/raum.jpg" alt="Hintergrundbild Raum">
    3. </div>

    Da hast du das Bild bereiits über HTML eingebaut. Da wird es schwierig, Text darüber zu legen :)

    Da müsste das Bild dann wie bei #kopfbereich über CSS eingebaut werden.


    Bitte Problem genauer beschreiben. Danke.

  • Hey,


    Axel : Ich denke er möchte den Text über das Bild als Textbeschreibung haben.


    @TE : Du kannst wir Axel gesagt hat das Bild über CSS einbauen und den Text dann darüber positionieren. Was man auch machen kann ist Unterhalb des Bildes eine Beschreibung. Ich sehe, dass du anstatt den vorgegebenen Containern in HTML wie z.b. <header>, <main>, <article>, <section>, <aside>, <footer> , einfach nur divs benutzt. <div>-container sollte man nur benutzen wenn die anderen container nicht zum vorhaben passen.


    Ich habe dir mal ein Beispiel erstellt wie ich die Bildbeschreibung machen würde https://jsfiddle.net/mkrth2h9/5/:





    Stef

  • Guten morgen :),


    Es hat geklappt, du hast mich mit deinem indirekten Tipp, darauf gebracht, dass es ja eig über CSS eingebaut werden sollte .


    Ja der Bereich den du gezeigt hast <div><img id="......."> habe ich gelöscht und über css in den Bereich <div id="Inhalt" > eingebettet und siehe da, es hat funktioniert :)

    Beide Beiträge haben mir geholfen .

    Danke vielmals