[weberleins]

zur "Lösung" - Warum so kompliziert und dennoch nicht für alte Browser kompatibel?

.klasse {
  background:url(pfadzumbild.jpg) no-repeat;
  background-size:100% auto;
}

Dieses Beispiel zieht das Bild auf 100% Breite und berechnet die Höhe dazu passend. Das Seitenverhältnis wird beibehalten.

untersützt wirds von chrome ab 4.0, firefox ab 4.0, opera ab 10.5 und safari ab 5.0

arbeitetst du mit den präfixen -moz-, -o- und -webkit- gehts schon mit firefox 3.6, opera 10.0 und safari 3.1 - also nicht wirklich viel mehr browsern.

im ie funzt es so oder so erst ab der 9er version...

siehe auch [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

willst du auch ie8 und früher unterstützen, dann kommste um javas***** nicht rum...

function pseudoBgSize(el, bgWidth, bgHeight) {
  if (el) {
    $(el).css("background-image").match(/"(.*)"/);
    var elBg = RegExp.$1;

    if (!$(el) || $(el).css("z-index") != "")
      $(el).css("z-index", "10");
    else
      var elZIndex = parseInt($(el).css("z-index"));
    if (!bgWidth)
      bgWidth = "auto";
    if (!bgHeight)
      bgHeight = "auto";

    $(el).css("background", "transparent").append("<div style='position:absolute; z-index:" + elZIndex + "; top:0; left:0; width:100%'><img src='" + elBg + "' alt='' style='width:" + bgWidth + "; height:" + bgHeight + "'></div>");
  } else
    return false;
};

aufruf der funktion dann in der form wie:

pseudoBgSize(".deineKlasse", "100%"); // nur mit Übergabe des Elements und der Breite

und in der css:

.deineKlasse {
  position:relative;
  z-index:10;
}

js hab ich nicht selbst gemacht, des ist von daniel erlinger - habs aber überflogen, sollte so korrekt sein.