Probleme bei der Darstellung mit Hintergrundbildern

[tiger2712]

Hallo Leute,
Ich habe das erste mal ein Hintergrundbild als ganzes mit eingebaut!
die breite des bildes beträgt 1800px und die höhe 1200px !
das layout ist im 980er raster angelegt.
leider musste ich feststellen das es bei niedrigeren auflösungen zu problemen kommt! da die grafik zum teil nicht mehr zu sehen ist ! ich habe aber schon so viel gesehen die sowas eingebunden haben und das passt! was mache ich falsch?
das CSS dazu:
body{
background:url(../bilder/home.jpg) center no-repeat;
width:auto;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
line-height:1.4em;
color:#493022;
background-color:#ee85d7;
}
ich habe die seite mal ins web gesetzt und sie ist unter folgendem link zu erreichen:


es wäre schön, wenn jemand einen tipp für mich hätte!
gruss und danke schon im voraus!
tiger2712

 

[MyBad]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Mit reinem CSS wirst du das nicht hinbekommen. Du müsstest das Hintergrundbild also per JavaScript an Breite des Browserfensters anpassen.

 

[tiger2712]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Mit reinem CSS wirst du das nicht hinbekommen. Du müsstest das Hintergrundbild also per JavaScript an Breite des Browserfensters anpassen.

ok! danke für den tipp!
da muss ich mich mal kundig machen!

 

[NiAlMa]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Hast du schon versucht dem Bild 100% im Css zuzuweisen

body{
background:url(../bilder/home.jpg) center no-repeat;
width:100%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
line-height:1.4em;
color:#493022;
background-color:#ee85d7;
}

 

[sokie]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Hast du schon versucht dem Bild 100% im Css zuzuweisen

body{
background:url(../bilder/home.jpg) center no-repeat;
width:100%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
line-height:1.4em;
color:#493022;
background-color:#ee85d7;
}

die interessante frage wäre: hast DU das schon versucht? vielleicht gehst du das mal selbst durch, bevor du andere auf so einen Weg schickst. (body{width:100%} ist default)

 

[NiAlMa]

AW: Probleme bei der Darstellung mit Hintergrundbildern

sorry mein Fehler ... müsste eigentlich mit min und max width funktionieren! Zumindest löse ich das Problem unterschiedlicher Darstellungen (Auflösungen) so und bislang hatte ich damit keine Probleme

 

[MyBad]

AW: Probleme bei der Darstellung mit Hintergrundbildern

sorry mein Fehler ... müsste eigentlich mit min und max width funktionieren! Zumindest löse ich das Problem unterschiedlicher Darstellungen (Auflösungen) so und bislang hatte ich damit keine Probleme

Auch mit min- und max-width geht es nicht. Wie sokie schon schrieb: Teste deine Tipps erst einmal selbst bevor du Unfug verbreitest

 

[Marshell8282]

AW: Probleme bei der Darstellung mit Hintergrundbildern

ist php nicht besser als javascript für solche dinge? Ist nur eine frage

 

[Klecka]

AW: Probleme bei der Darstellung mit Hintergrundbildern

ist php nicht besser als javascript für solche dinge? Ist nur eine frage

Nein, PHP bringt da garnichts!
Das hier sollte genau das richtige sein: Link
Da gibt's zwei Möglichkeiten zur Umsetzung mit CSS und eine mit jQuery

Grüße

 

[Lueh]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Eine für mich bis jetzt immer super funktionierende Lösung war es das Bild nicht per background-image in den Body zu laden, sondern per <img> tag!

So funktioniert das mit dem Strecken eigentlich recht gut.
Natürlich muss man dem Browser explizit sagen wo das Bild dargestellt werden soll:

<img src="hintergrund.jpg" alt="Hintergrund"  style="
position:absolute; 
top: 0px;
left: 0px;
z-index: -1; 
height:100%;
width:100%;
">

Natürlich muss man dem HTML und BODY element auch noch die 100% zu weisen!

mfg Lüh

 

[Klecka]

AW: Probleme bei der Darstellung mit Hintergrundbildern

@Lueh: Danke, toller Tipp! Wusste garnicht, dass es auch negativen z-index gibt...

 

[Lueh]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Gibt es - aber laut w3c auch nur den einen "-1".

Freut mich wenn ich helfen konnte, wenns funktioniert freu ich mich noch mehr!

mfg Lüh

 

[NiAlMa]

AW: Probleme bei der Darstellung mit Hintergrundbildern

und siehe da auch hier wird in der CSS-Lösung mit min-height gearbeitet...wie ich es oben bereits geschrieben habe...hatte leider nur wide statt heigh....soll/darf nicht vorkommen

Grüße

 

[MyBad]

AW: Probleme bei der Darstellung mit Hintergrundbildern

und siehe da auch hier wird in der CSS-Lösung mit min-height gearbeitet...wie ich es oben bereits geschrieben habe...hatte leider nur wide statt heigh....soll/darf nicht vorkommen

Grüße

Naja, du hast deine Aussage auf das Body-Tag bezogen und da würde es nun mal nicht funktionieren!

Die Lösung von Lueh klingt interessant. Wieder was gelernt.

 

[Lueh]

AW: Probleme bei der Darstellung mit Hintergrundbildern

Und:

Ich habe ja nicht mit min-height gearbeitet - und jetzt gerade habe ich bemerkt dass durch min Angaben das Bild nur mit dem originalen Seitenverhältnis gestreckt wird, heißt: ein bild mit 10*30 px in einem viewport von 1000*800 px würde auf 1000*3000 Pixel gestreckt werden (ist demnach größer als der Viewport -> scrollbars erscheinen).

Das könnte man zwar mit overflow:hidden beheben, Das Bild würde aber nicht zu 100% zu sehen sein!

PS: <- W3School z-index Artikel, für die die es genau wissen wollen

mfg Lueh