Div Größe an Hintergrundbild anpassen

[hamst0r]

Div Größe an Hintergrundbild anpassen

Hallo,
ich möchte ein Div an die Größe des Hintergrundbildes anpassen.

Test Die Seite läuft auf einer größeren Auflösung so wie sie soll.
Wenn jedoch das Fenster schmaler wird, wird die Höhe des Hintergrundbildes automatisch verringert, so dass die Proportionen immer noch passen.

Da das Div aber immer noch 600px hoch ist, wird ein weißes leeres Feld erzeugt, welches eben entfernt werden soll.



Außerdem ist die Frage ob man die Bilder per Javascript laden sollte, da bei vielleicht 5/6 Bildern die Ladezeiten bei langsamen Internet sehr hoch gehen könnten?

 

[BiosShock]

AW: Div Größe an Hintergrundbild anpassen

Ich mach es schnell

Schau mal hier. Das sollte helfen.

 

[hamst0r]

AW: Div Größe an Hintergrundbild anpassen

Vielen Dank erstmal, entweder versteh ich es nicht, oder das ist nicht die Lösung für mein eigentliches Problem.

Das Bild wird richtig skaliert, das Div, indem das Bild als Hintergrundbild ist, soll jedoch mitskaliert werden.

 

[BiosShock]

AW: Div Größe an Hintergrundbild anpassen

Vielen Dank erstmal, entweder versteh ich es nicht, oder das ist nicht die Lösung für mein eigentliches Problem.

Das Bild wird richtig skaliert, das Div, indem das Bild als Hintergrundbild ist, soll jedoch mitskaliert werden.

Webseiten sollten immer in der größe von 1080p gestaltet werden. Kleiner Tip: Skaliere das Bild auf diese größe 1080p mit einem Bildprogramm und baue es dann ein.

Das spart Arbeit und von der Bandbreite ist das wohl heute das kleinste Problem.

Beispiel:

html, body {
height: 100%;
width: 100%;
min-width: 1024px;
margin: 0 auto;
vertical-align: middle;
}
body {
background: url(../pic/bg.jpg) center no-repeat;
}

Edit: Dein Link ist tot.

 

[hamst0r]

AW: Div Größe an Hintergrundbild anpassen

Die Bilder haben eine Breite von 1920px, werden aber bei kleineren Auflösungen auf die entsprechende Größe skaliert.

Wenn ich die Bilder dauerthaft 1920px breit machen würde, hätte ja jeder, der eine kleinere Auflösung hat eine vertikale Scrollleiste oder nur einen kleinen Ausschnitt des Bildes.

 

[BiosShock]

AW: Div Größe an Hintergrundbild anpassen

Ruf mich doch bitte mal über Skype an. Addy ist in meinem Profil.

 

[hamst0r]

AW: Div Größe an Hintergrundbild anpassen

Würden die Bilder dauerthaft auf 1920px Breite sein, würde es bei kleineren Auflösungen so aussehen:


Stattdessen sollte es so sein:

 

[BiosShock]

AW: Div Größe an Hintergrundbild anpassen

Folgende CSS3-Property skaliert das Hintergrundbild auf 100% der verfügbaren Breite:
background-size: 100%;


Und damit wird das Bild auf die gesamte Breite UND Höhe gestretcht:
background-size: 100% 100%;


Der Vollständigkeit halber sei dabei angemerkt, dass nur moderne Browser diesen Standard unterstützen.
Ältere Browser (insbesondere der Internet Explorer) ignorieren die Property einfach.

 

[hamst0r]

AW: Div Größe an Hintergrundbild anpassen

Das bild wird mit background-size:100% auto richtig skaliert, dieses Bild ist jedoch in einem Div mit der Höhe 600px, dieses Div soll mal kleineren Auflösungen auf die Höhe des Bildes skaliert werden.

Es geht also nur um die Größe des Divs, welche geändert werden soll, nicht um die falsche Skalierung des Bildes.

 

[BiosShock]

AW: Div Größe an Hintergrundbild anpassen

Dann wirst Du an Java nicht vorbei kommen, wenn ich das richtig verstanden hab. In Google mal: " html Box skalieren prozentual" eingeben.

 

[milesdavis]

background-size versteht aber nicht jeder Browser.
Leute mit IE schließt du damit schonmal komplett aus!

Ich würde diese Bersechnungen mit Javascript - genauer: jQuery - machen. Da kannst du mit resize() und ready() auf alle Änderungen und Skalierungen dynamisch reagieren, rechnest die Werte konkret in Pixel aus.
Bei Prozentwerten kommen manchmal die Browser durcheinander wegen den Bezugswerten, mit margin / padding oder ohne etc., das nur als Beispiel.

 

[hamst0r]

AW: Div Größe an Hintergrundbild anpassen

Danke, habe es jetzt mit jQuery gemacht, leider ist jetzt noch ein anderes Problem da.

Test

Die Geschwindigkeit muss irgendwie ebenfalls dynamisch berechnet werden, da bei kleinen Auflösungen das Bild nun nicht mehr hoch genug ist und schon wieder ein weißer Rand entsteht.
Wenn ihr das Browserfenster verkleinert und dann scrollt werden ihr es bestimmt merken.

Habt ihr eine Idee wie ich das anders lösen könnte?

 

[VikingGe]

AW: Div Größe an Hintergrundbild anpassen

background-size versteht aber nicht jeder Browser.
Leute mit IE schließt du damit schonmal komplett aus!

Natürlich kann der IE background-size. Sagt zumindest w3schools. Nur eben nicht bis Version 8, aber ganz ehrlich, wenn IE8-Support nicht aus irgendwelchen Gründen nötig ist, würde ich einen so hoffnungslos veralteten Browser einfach ignorieren. Ich meine, abgesehen von ein paar ewiggestrigen XP-Nutzern dürfte den keiner mehr ernsthaft benutzen (Unternehmen werden das Update von 6 auf 8 auch frühestens in ca. 10 Jahren durchführen ), die 9er-Version gibt es meines Wissens auch für Vista.

Habt ihr eine Idee wie ich das anders lösen könnte?

Ich habe zwar jetzt keine Ahnung, wie du das implementiert hast (keine Lust, jetzt in den JavaScript-Code zu schauen, ich hasse die Sprache), und ich habe auch keine Ahnung, was man über die einzelnen Boxen und die jeweilige Bildhöhe weiß (ein sehr hohes Bild muss ja eigentlich schneller verschoben werden als eines von geringerer Höhe), aber du müsstest einigermaßen problemlos berechnen können, bei welcher Scrollposition sich ein Bild an der oberen bzw. unteren Browserkante startet bzw. aufhört. Das dann einfach bei jeder Größenänderung neu berechnen und fertig.

Webseiten sollten immer in der größe von 1080p gestaltet werden

Sehe ich ehrlich gesagt anders. In einem gewissen Rahmen sollte ein Design auf jeden Fall skalieren, sonst sieht es a) auf größeren Auflösungen furchtbar aus, b) wird es auf kleineren Displays (oder auch einfach bei einem nicht maximierten Browserfenster!) quasi unbenutzbar. 1200 Pixel in der Breite ist schon das höchste, was ich persönlich jetzt an minimaler Bildschirmbreite voraussetzen würde...

 

[milesdavis]

Der javascript-code ist ganz einfach:

$(document).ready(function(){

function groesse_anpassen(){
var fensterbreite = $(window).width();
var fensterhoehe = $(window).height();
$("#dein_background_container").css({
width: fensterbreite + "px",
height: fensterhoehe + "px"
});
}

groesse_anpassen();

$(window).resize(function(){
groesse_anpassen();
});

});

Das wärs im Prinzip schon.
Auf www.nochern.de hab ich das so umgesetzt.
Den Code kann ich dor gerne geben.