background-image vollbild mit allen Auflösungen

[dempsey]

Hallo Zusammen,

ich habe hier ein hochauflösendes Bild dass eine gewaltige Auflösung von 7016x5640 hat. Dieses Bild wiegt auch recht viel (~15MB) und ich werde nicht um das kleiner schneiden nicht drumherum kommen. Es braucht jedenfalls sehr lange zu laden und ist nicht gerade perfomantisch ;) aber egal...

Das Bild möchte ich als Hintergrund machen per CSS und was ich mir als problematisch vorstelle ist, wie es mit anderen Auflösungen funktioniert. Zwischen normalen 4:3 Bildschirmen oder 16:9 Breitbild Bildschirmen. Hättet ihr da eine Idee für mich? Es soll halt nicht gestreckt werden sodass den Hintergrund so verzogen aussieht. Es ist nämlich ein Bild von einer Landschaft und dann fällt sowass natürlich direkt auf

[reinhardlange]

Nabend,
bei der Größe kann ich Dir nicht helfen ... mit CSS -> media-query und ev. als background-image ... verwenden z.B:

@media (min-width: 768px) and (max-width: 979px) {
#big-image
{
width: 100%; /* wäre gesamte Größe */
}
}

@media (min-width: 1600px) {
#big-image
{
width: 85%; /* wäre halt kleiner -> so mit Rahmen
}
}

... und hier ein Link zum Testen (online): http://http://mattkersley.com/responsive/

[threadi]

Mit reinem CSS könnte man auch "background-size: cover;" verwenden. Allerdings hat man per CSS so oder so das Problem, dass die Datei einfach zu groß ist. Die solltest Du per PHP verkleinern.