Hintergrundbild anpassen

  • Hallo Leute,


    ich habe ein Hintergrundbild an die Browser-Größe angepasst habe aber das Problem, dass wenn ich die Browser-Größe verändere, spricht größer bzw. kleiner ziehe dann skaliert sich das Bild immer proportional, aber ab einer bestimmten Größe bekomme ich am rechten Bildrand eine weiße Fläche. Wie kann ich dies verhindern? Wenn ich allerdings im Script unten im DIV Tag (id="bg_image"...............zusätzlich width:100% eingebe), dann habe ich den weißen Rand nicht mehr aber dafür verzerrt das Hintergrundbild beim ziehen, und das soll es nicht.


    Ich habe zum besseren Verständnis noch ein Bild eingefügt[attachment=0]<!-- ia0 -->sreenshot.png<!-- ia0 -->[/attachment]


    hier der Skript:


    <style type="text/css">

    body {
    margin:0px;
    font:arial, helvetica sans;
    font-size:10px
    }


    bg_image {
    width: 100%;
    height: 100%;
    left: 0px;
    right:0px;
    down:0;
    top: 0px;
    position: absolute;
    z-index: 0;
    }
    </style>


    <body scroll="no">

    <div id="bg_image" style="width:100%; height:100%;"> <img src="news_96.jpg" style="height:100%; z-index:0" >
    </div>
    </div>
    <iframe src="nav1.htm" name="inhalt" scrolling="no" noresize frameborder="0" height="350px"
    align="right" z-index=1 style="position:absolute; top:22%; right:0%; width:750;
    align:right; background-color:#FFFFFF; border:1px; padding:5px; ">
    <p align="right">&nbsp;</p>
    </iframe>
    </div>


    </body>
    </html>

  • ..du hast den Grund doch schon selber genannt^^

    Zitat von &quot;donjoyvanni&quot;

    [...]wenn ich die Browser-Größe verändere, spricht größer bzw. kleiner ziehe dann skaliert sich das Bild immer proportional[...]width:100% eingebe), dann habe ich den weißen Rand nicht mehr aber dafür verzerrt das Hintergrundbild beim ziehen


    Einerseits verlangst du von dem Bild, dass es immer Proportional bleiben soll.
    Bei deiner "Lösung" sagst du dem Bild nun, dass es auf jedenfall die komplette Breite einnehmen soll, und auf die Proportionen nicht mehr achten soll... (weil wenn das Bild 100% Breite einnehmen soll.. aber proportional nicht die Entsprechende Höhe, sondern nur z.B. 75%, gegeben ist.. wie soll das Bild da nicht verzerren?)
    Du müsstet theoretisch dieses Problem auch haben, wenn du das Fenster zu hoch ziehst, dass dann unter/über dem Bild ein weißer Rand ist.


    PS: Verlagere bitte alles in den Style-Teil der Datei. (Bevor wer was sagt, ich gehe mal davon aus, dass er es eigentlich in eine externe Datei auslagert, aber selbst ich schreibe alles wenn ich was teste in eine Datei)
    Außerdem sind (i)Frames veraltet und gehören daher auf keine Vernünftige Seite.

  • Vielen Dank für Deinen Post.
    Heißt das ich kann es mit CSS nicht lösen? Kann ich denn mit CSS eine Browserabfrage erstellen wonach sich das Bild anpasst?
    Oder mit welcher Methode könnte ich es lösen.

  • Nimm dir mal ein Grafikbearbeitungsprogramm deiner Wahl, z.B. Gimp, und öffne dieses Bild und erstellst anschließend noch eine weitere Ebene(unten Liegend).
    Nun veränderst du die Hintergrund-/Leinwandgröße der unteren Ebene größer als das Bild ist, such dir irgendwelche Zahlen aus.
    Nun passt du die größe des Eigentlichen Bildes der der unteren Ebene an, aber so das das Bild Proportional bleibt(also nicht verzehrt) aber das das Bild die komplette Fläche des unteren Bildes ausfüllt :)


    Du kannst dich dumm und dämlich versuchen, es wird nicht gehen, wenn die untere Ebene nicht zufällig die selben Proportionen des Bildes hat.


    Was ich dir damit sagen will ist, dass du dich entscheiden musst.. entweder das Bild verzehrt, oder es füllt die komplette Fläche aus, beides geht einfach nicht!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!