Webseite teilweise mit Hintergrundbild

    Hallo Leute,

    ich habe mir da etwas ausgedacht und weiß noch nicht so richtig wie ich es umsetzen soll. Ich versuche es erstmal kurz zu erklären. Meine Webseite sieht ja zu Zeit so aus und ich möchte nun im unteren Teil einen kleinen Grubenriss anfertigen und einfügen.

    So sieht ein Grubenriss aus...




    Einen ähnlichen möchte ich selbst erstellen und dann als Grafik unten in die Webseite einfügen. Er soll quasi im Hintergrund liegen und nur im unteren Teil, auf der dunklen Fläche, links und recht neben den Content liegen.

    Quasi so... also ganz grob gezeichnet ;)




    Quasi möchte ich im unteren viertel oder drittel ein Hintergrundbild einfügen. Wie fange ich da am besten an und welche breite wäre optimal? Jeder hat ja eine andere Auflösung, bei meinem Monitor ist noch relativ viel Platz.


    Ich hoffe ihr habt ein paar Denkansätze, LG und Danke.

    Per CSS auf den body, so oder ähnlich:


    Code
    body {
    background-image: url("bild.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment:fixed;
    background-size: contain;
}

    Du könntest auch background-size: cover; mal ausprobieren

    Hallo Indigo,

    erstmal vielen Dank, was für mich noch wichtig ist, ist die Größe vom Bild. Mein Bildschirm hat eine Auflösung von 1920 x XX, meinst du das reicht oder muss man da noch höher ansetzten. Ich denke 22" Monitore sind ja schon ganz normal und weit verbreitet?


    Ich würde es jetzt mal etwas überdimensionieren, so sollte es ja bei den meisten Bildschirmen passen. Ich glaube am wichtigsten ist es, wenn ich das Bild so anlege, dass es auch verkleinert gut aussieht.

    Also ich habe es jetzt mal mit einem Bild probiert, das Problem ist jetzt aber das ich ja noch die Hintergrundfarbe habe. Diese überdeckt nun das Bild.

    Lösche ich diese hier...


    So fehlt mir natürlich meine Hintergrundfarbe, diese soll ja aber bleiben. Wie kann ich dem entgegenwirken?


    LG und Danke

    Hallo Rene,


    also das von astrid ist ein wichtiger Hinweis, weil Du die Hintergrundfarbe behalten möchtest.


    Aber: Deine Hintergrundfarbe ist schwarz - Deine Zeichnung aber auch :)


    Hab mal temporär übermalt (vorher im html {xxxx} die backgrounds weggeben):

    wobei ich hier grau genommen habe.


    Tja, wird Dir wahrscheinlich nicht so gefallen, da Du ja schwarz willst (aber sonst sieht man das Bild ja nicht):



    Liebe Grüße

    Christine

    Hallo Christine, Astrid und Indigo,

    super, da habt ihr mich schon mal ein ganzes Stück weiter gebracht... Und ja Christine, das grau sah wirklich etwas gruselig aus. Das hab ich jetzt noch voll ergänzt und der Body sieht nun so aus.


    Jetzt muss ich mal schauen wie ich den Seigerriss am besten hin bekomme. Ein paar Ideen habe ich da schon, die muss ich nur noch umsetzten und hoffen das es funktioniert.


    Erstmal Vielen Dank euch, ich melde mich wenn es geklappt hat, oder doch total doof aussieht :D


    LG und Danke