[kochi19]

Hallo,

habe mein Hintergrundbild fixiert. Möchte aber das es sich der jeweiligen Auflösung
des Besuchers anpasst.

Wer kann mir helfen ???

body
{ font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  text-shadow: 1px 1px #FFF;
  background: transparent url(../images/background.jpg) fixed;}

Ist erledigt...

falls jemand das gleiche Problem hat -->

body
{ font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  text-shadow: 1px 1px #FFF;
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

[NetWebs]

Ist es so schwer einen sinnvollen Titel zu wählen?

"Hintergrundbild dynamisch"

Du hast ein Hintergrundbild. Aha!
Das Windowshintergrundbild? Linux? Mac?
Oder doch bei einer Applikation? C#? Java? C++?
Welches UI-Framework? WPF? JavaFX? Qt? Swing?
Oder doch Android oder iOS?

Dynamisch?
Soll das Hintergrundbild dynamisch erzeugt werden?
Mit dynamischen Inhalt?
Oder eine dynamische Anzahl?


Ach... Du redest von CSS und willst, dass dein Hintergrundbild im Browser gestreckt wird!

(Wie alt bist du?)

[sigon]

@NetWebs

Was hast du für ein Problem, er schreibt doch was er möchte.

Zitat von kochi19

Hallo,

habe mein Hintergrundbild fixiert. Möchte aber das es sich der jeweiligen Auflösung
des Besuchers anpasst.

Wenn du nicht lesen kannst, dann lass es.

@kochi19

versuche mal folgendes zusätzlich einzufügen


background-size:100% 100%;

[Safer]

Mahlzeit,

Background Size ist eine möglichkeit. Du kannst aber auch versuchen es so zu machen (alles im Bereich deines Backgrounds versteht sich):
min-width: 60%;
width: 100%;
max-width: 120%;
min-hight: 60%;
hight: 100%;
max-hight:120%;

Damit sollten kleinere Auflösungen bei der Hintergrundgrafik runterskaliert werden auf min. 60% der Originalgröße und bei hohen Auflösungen müsste es hochskaliert werden auf 120% der Originalgröße.
Statt der % Angaben sind natürlich auch Pixelgrößen möglich.
Z.B. min-width und min-hight auf die größe eines I-Phones anpassen und die max. teile jeweils auf 1920 (width) 1080(height) einstellen. Dementsprechend nur px. anfügen.

Grüße

[ProgMaster]

Zitat von sigon

Was hast du für ein Problem, er schreibt doch was er möchte.

Der Titel deutet absolut nicht darauf hin, was der TE haben möchte.
Dann kann man den Titel gleich abschaffen oder überall nur noch "Hallo" reinschreiben.

Na ja... ihr scheint nicht arbeiten oder jedenfalls nicht im IT-Bereich oder wo man mit Email kommuniziert.

Des Weiteren wäre es sinnvoll den Browser zu nennen und ob man Javas***** dafür einsetzt oder einsetzen möchte! Eine reine CSS Lösung wird nicht von jedem Browser unterstützt.

[Mr_Braun]

Wer hier ständig dummpalabert und die Leute trollt, kriegt die Quittung.
Ob nun ein Netwebs oder ein ProgMaster!

[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.