Desktop und Mobile unterschiedliches Bild laden

[Khan]

Leute gibt mir mal bitte einen kurzen Tip. 2 Hintergrundbildern, Desktop soll die PNG und das JPG geladen werden, Mobil soll nur ein Bild geladen werden namens bg.jpg. Mein aktueller Code muß auf die Mobile Version angepasst werden:

.content{
	background-color:#000000;
	background-image:url(../images/bg.png), url(../images/panorama.jpg);
	background-repeat:no-repeat;
	background-position: top center;
}

@media (max-width: 876px) {
  .content {      
  background-size:contain;
}
}

---

Ich würde logischerweise verstehen:

@media only screen (max-width: 876px) {
  .content {      
  background-size:contain;
  background-image:url(../images/bg.jpg);
  background-repeat:no-repeat;
  background-position:top center;
}
}

GEHT ABER NICHT!

P. S. Dreamweaver kennt die @media befehle noch nicht, sonst würde es anhand von automatischen Vorschlägen besser gehen.

[Khan]

Gelöst!

.content{
	background-color:#000000;
	background-image:url(../images/bg.png), url(../images/panorama.jpg);
	background-size:auto, cover;
	background-repeat:no-repeat;
	background-position: top center;
	margin-top:-50px;
}

@media (max-width: 700px) {
  .content {
	background-size:contain;
  	background-color:#000000;
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-position: top center;
	margin-top:-50px;
}

[Gunnar Bittersmann]

@@Khan

Gelöst!

Nein!

@media (max-width: 700px) {

Du hast die Viewportbreite abgefragt, nicht die Bandbreite. Das hat wenig miteinander zu tun:

„Manchmal habe ich das Laptop dabei, was über Kabel oder WLAN mit dem Smartphone verbunden ist, welches als Hotspot dient und über Mobilfunk die Verbindung zum Internet herstellt. Ich hab also bei desktop-großem Viewport eine 3G- oder EDGE-Verbindung. Ein anderes Mal nutze ich das Smartphone, was in einem WLAN mit DSL-Anbindung hängt.

Das nur für diejenigen, die denken, es gäbe irgendeinen Zusammenhang zwischen Viewportgröße und Bandbreite. (Die Korrelation mag minimal größer als 0 sein, aber weit entfernt von 1. Sehr weit.)“ (yours truly)

LLAP 🖖

[Khan]

Huch, das ist ja wieder was neues. Aber eigentlich ist das ja egal denn bei max 700px Breite wird halt das verkleinerte Bild geladen und auf mobilen Geräten angezeigt, so lange die Seite richtig angezeigt wird ist es ja schnuppe.

[unerwünschtes Vollzitat]

[Gunnar Bittersmann]

@@Khan

Aber eigentlich ist das ja egal denn bei max 700px Breite wird halt das verkleinerte Bild geladen und auf mobilen Geräten angezeigt, so lange die Seite richtig angezeigt wird ist es ja schnuppe.

Ich habe aber weit mehr als 700px Breite bei meinem mobilen Gerät.

Und wie gesagt, ist ein halbes Megabyte auch für Desktop über DSL zu viel. Und hier völlig unnötig.

LLAP 🖖

[Jörg Reinholz]

Moin!

@media (max-width: 700px) {

Du hast die Viewportbreite abgefragt, nicht die Bandbreite. Das hat wenig miteinander zu tun:

Naja. "mobil" kann man indes für große Monitore irgendwie schon verneinen. Ansonsten ist es eine gute Idee, Webseiten nach wie vor "rank, schlank und bandbreitenschonend" zu bauen. Nur vergessen dass insbesondere sich großartig wähnende Agenturen, die dann die Webseiten ihrer deutschen Kunden (die auch weit überwiegend deutschen Kunden haben) auch auf schnarchlangsamen und mit einer erstaunlichen Übertragungsfehlerrate angeschlossenen "Servern" in Bulgarien hosten. Das meinen die dann mit "mobiler" Webseite:

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Naja. "mobil" kann man indes für große Monitore irgendwie schon verneinen.

Nein, bejahen.

Ich würde den Monitor eines MacBooks schon zu den großen zählen. Und wie ich schon sagte, ist MacBook im Mobilfunknetz bei mir nicht die Ausnahme, sondern die Regel.

LLAP 🖖

[Gunnar Bittersmann]

@@Khan

Leute gibt mir mal bitte einen kurzen Tip. 2 Hintergrundbildern, Desktop soll die PNG und das JPG geladen werden, Mobil soll nur ein Bild geladen werden namens bg.jpg.

Dazu habe ich dir bereits einen Tip gegeben.

LLAP 🖖