Hintergrundbild mit CSS

  • Guten Tag,
    ich möchte gerne mit CSS ein Hintergrundbild einfügen so sieht momentan mein Code aus

    Code
    body{
    background-image: url("pi_wallpaper_14.jpg");
    height:100%;
    margin:0%;
    padding:0%;
    }


    mein problem ist jetzt dass Bild viel zu groß angezeigt wird und man nicht alles sehen kann


    Unten einmal das bild wo eingefügt werden soll und dann noch wie es aussieht wenn ich es im browser nachsehen möchte


    Freue mich über jede Hilfe :-)

  • Schneide die Himbeere aus, so das nur die Himbeere selbst und ein schmaler schwarzer Rand übrig bleibt. Danach nimmst du das Bild ich nenne es jetzt mal raspberry.jpeg und verwendest folgenden CSS Code.




    die 350px sind die Höhe die musst du noch für dich ausrichten, wenn du verschiedene Auflösungen unterstützen willst musst die die Höhe mit Javascript berechnen und setzen, ansonsten ist das Logo bei verschiedenen Auflösungen und Monitor Größen nicht immer in der Mitte.


    Zweite Möglichkeit wäre das Bild zu lassen wie es ist und die Position des überflüssigen Bereiche in den nicht sichtbaren Bereich zu verschieben (mit baground-position) das erfordert aber zwingend JavaScript zum berechnen und positionieren.