Hintergrund und Auflösung ... wie vereinen?

[druluc]

Hallo, ich bin gerade an nem knackigen Problem

Ich würde gerne ein Hintergrund mit ner Grafik auf ner Web-Site benutzen. Wie immer bereitet mir hier das Auflösungsproblem kopfzerbrechen.

Was für möglichkeiten habe ich denn da? Eventuell eine "riesengroße" Grafik abspeichern die sich dann verkleinert (Auflösungsabhängig)?! Oder das Hintergrundbild in gängigen Auflösungen, dass sich bei Bedarf lädt!?

Kann mir wer helfen?

LG

 

[druluc]

<script type="text/javascript">
if (screen.width >= 1024) {
  window.location.href = "datei1.htm";
} else {
  window.location.href = "datei2.htm";
}
</script>

SelfHTML

eventuell damit?

Müsste das script dann wie flgt bearbeiten:

<script type="text/javascript">
if (screen.width >= 800) {
  window.location.href = "datei1.css";
} else {
  window.location.href = "datei2.css";
}

if (screen.width >= 1024) {
  window.location.href = "datei3.css";
} else {
  window.location.href = "datei4.css";
}

if (screen.width >=1280) {
  window.location.href = "datei5.css";
} else {
  window.location.href = "datei6.css";
}

if (screen.width >= 1400) {
  window.location.href = "datei7.css";
} else {
  window.location.href = "datei8.css";
}

if (screen.width >= etc.) {
  window.location.href = "datei9.css";
} else {
  window.location.href = "datei10.css";
}
</script>

Geht das so in der art? Aber eigentlich beißen sich doch die einzelnen if-schleifen oder? Wie könnte sowas geschickter gemacht werden?

 

[druluc]

ich glaube ich habs =)

http://www.webmaster-resource.de/browserweiche-nach-auflosung-mit-javascript.php

 

[druluc]

Habe es doch noch nicht ganz geklärt =( ... ich weiß nicht wie ich es dem script beibringen kann, statt mir die css datei (also den code im browser) anzuzeigen, meine jeweilige css-Datei auf die Seite anwendet.

 

[druluc]

Und nochmal ich am späten Abend. Bei folgendem Script funktioniert shcon was:

<script type="text/javascript">
if (screen.width >= 1280) {
document.write('<link rel="stylesheet" type="text/css" href="CSS/formate_1280px.css">');
alert("StyleSheet für 1280 wird geladen.");
}
else if (screen.width >= 1024) {
document.write('<link rel="stylesheet" type="text/css" href="CSS/formate_1024px.css">');
alert("StyleSheet für 1024 wird geladen.");
}
</script>

es wird aber NUR die "IF-Bedingung" ausgeführt. Die "ELSE IF" Bedingung macht er nicht. Habe ich nun die 1280 PX große Css-Datei im 1024px Breitem Browser geöffnet, lädt er trotzdem die 1280 px. wasn falsch? Ich glaube viel ises nemmer, bin kurz vorm ziel =)

 

[Konsumkind]

Damit das nicht entgültig zum Selbstgespräch ausartet:

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

und

http://www.themaninblue.com/experiment/ResolutionLayout/

könnten dir eventuell weiterhelfen

 

[joro]

Hallo,
oder als weitere Möglichkeit, nenn ich mal die CSS3 Media Queries, funktionieren in allen aktuellen Browser Versionen außer ie8, eventuell braucht man ein Javascript Fallback, für die alten Browser.

Hier mal Beispiele wie sowas ausehen kann:

# gross
<link rel="stylesheet" type="text/css" href="style1024.css" media="screen and (min-device-width: 1024px)" />

# klein
<link rel="stylesheet" type="text/css" href="style800.css" media="screen and (max-device-width: 1024px)" />

Das ganze lässt sich auch in einer Stylesheet Datei verwenden.
z.B. so:

@media screen and (max-width: 800px) {
  .class {
    background: #ccc;
  }
}

Liebe Grüße,
joro