Hintergrundbild automatisch anpassen
- #1762462 - 22.05.2009, 03:30:09
|
LNC Kai
Nicht registriert
|
Guten Morgen, suche seit einiger Zeit einen Code, der das Hintergrundbild automatisch an die Fenstergröße anpasst. So wie z.B. im Chat. - Da zieht sich das Bild ja auch nach beliebiger Fenstergröße größer oder kleiner. ![:-]](/images/graemlins/default/grin.gif "grins") Sowas such' ich halt für meine Homepage. Danke Euch jetzt schonmal für die Antworten. Lg, Kai. [img]http://i39.tinypic.com/2urwlkl.gif[/img]
|
|
[zum Seitenanfang]
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1762533 - 22.05.2009, 11:01:54
|
natural selection.
Registriert: 13.08.2008
Beiträge: 1.610
|
Hallo. Dazu gibt's schon einige Fragen im Internet. Ich hab' einfach mal bei Google gesucht. Auf blog.antikoerperchen.de beispielsweise steht eine Loesung mit einem CSS-Workaround. Wie genau das nun funktioniert hab' ich mir jetzt nicht angeguckt, aber dort steht auch, weshalb der Verfasser des Artikels nichts davon haelt: Abgesehen davon halte ich die Idee, ein (skalierendes) Hintergrundbild in die Seite zu verpflanzen, für unsinnig. Die Gründe dafür sind: - Qualitätsverlust bei Bildverkleinerung (Extrapolation).
- Qualitätsverlust bei Bildvergrößerung (Interpolation).
- Nonkonforme Auflösungen (also Auflösungen die kein 4:3-Verhältnis haben) oder verkleinerte Browserfenster (z.B. wenn eine Sidebar angezeigt wird) führen dazu, dass Bilder unproportional skalieren. Ergo: Wieder Qualitätsverlust.
- Hintergrundbilder sind meist recht groß, also höhere Ladezeit.
- Um die Größe von Hintergrundbildern auf ein erträgliches Maß zu reduzieren, müssen die Bilder komprimiert werden. Erneuter Qualitätsverlust.
- Hintergrundbild wiederholt sich (Kachelung).
- Es bilden sich bei höheren Auflösungen weiße Ränder.
- Durch wechselnde Kontraste wird die Lesbarkeit der Schrift stark reduziert. Das ist nicht nur für normale Surfer anstrengend, sondern für Sehbehinderte eine Barriere.
Es empfiehlt sich also, nur stark verblasste kontrastarme Hintergrundbilder zu verwenden, in so fern sie als „Trägerfolie“ für Inhalte dienen. Ansonsten bieten sich noch Hintergrundkacheln an, also kleine kontrastarme Texturen, die auf dem Hintergrund eine Art Tapete bilden. Wie aktuell der Text von 2005 allerdings ist, weiss ich nun nicht. Ich hoffe trotzdem, dass ich dir geholfen hab'. Marc.  _________________________
»Wo kämen wir hin, wenn jeder sagte, wo kämen wir hin und
keiner ginge, um zu sehen, wohin wir kämen, wenn wir gingen.«
– Kurt Marti
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: Martini Sprite]
- #1762601 - 22.05.2009, 13:07:24
|
LNC Kai
Nicht registriert
|
Hm, klappt leider nicht so, wie ich's mir vorstelle.  Trotzdem danke, für die Suche. [img]http://i44.tinypic.com/2prfuc8.gif[/img] Kai. :D
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1763477 - 23.05.2009, 20:55:02
|
Mein Nick
Nicht registriert
|
<script type="text/javascript">
window.onload = function () {
var w = document.body.clientWidth;
var h = document.body.clientHeight;
document.getElementById('hgimg').style.width = w + 'px';
document.getElementById('hgimg').style.height = h + 'px';
}
</script>
<style type="text/css">
<!--
table, font, b, i, script, img, div { z-index:10; position:fixed;}
div#hg { z-index:0; position:absolute; left:0px; top:0px;}
img#hgimg { z-index:0;}
-->
</style>
<div id="hg"><img id="hgimg" src="" alt="" /></div>so oder so aehnlich ..
Bearbeitet von Mein Nick (23.05.2009, 20:55:48)
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1764483 - 25.05.2009, 09:49:01
|
LNC Kai
Nicht registriert
|
Danke, aber es klappt nicht.
Das Bild liegt über der ganzen Homepage xDDDD (Nur noch das Bild sichtbar, nichts anderes)
Und wenn ich das Fenster dann größer ziehe, zieht sich das Bild nicht mit.
Trotzdem danke. :)
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1764569 - 25.05.2009, 13:22:14
|
Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
|
Dann versuch mal den z-index auf -1 zu setzen statt auf 10... und schau, ob sich was tut. Das sollte zumindest das Problem des Überdeckens lösen. Ansonsten war die Vorgehensweise des Vorposters richtig: Die einzige Möglichkeit, die wohl noch machbar wäre, wäre das Bild in ein normales img-Element einzubinden, dieses img-Element mit Javascript so zu manipulieren, dass es dynamisch die Breite (und Höhe?) des Viewport einnimmt und eventuell absolut positioniert ist. Der gesamten Inhalt der Seite bekäme dann einen höheren z-index und läge über diesem Bild-Element. ( Quelle)
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: KnuddelWelli]
- #1764877 - 25.05.2009, 19:55:14
|
Mein Nick
Nicht registriert
|
Liegt am position - weshalb weiss ich auch, mach mal aus:
table, font, b, i, script, img, div { z-index:10; position:fixed;}
table, font, b, i, script, img, div { z-index:10; position:relative;}
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1765417 - 26.05.2009, 14:10:25
|
LNC Kai
Nicht registriert
|
@KnuddelWelli: Klappt nicht, liegt immernoch über der Homepage. Trotzdem danke 
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1767867 - 29.05.2009, 14:48:40
|
Mein Nick
Nicht registriert
|
<style type="text/css">
<!--
table, font, b, i, script, img, div {
z-index:10;
position:relative;
}
div#hg {
z-index:0;
position:absolute;
left:0px;
top:0px;
}
img#hgimg {
z-index:0;
width:100%;
height:100%;
}
-->
</style>
<div id="hg"><img id="hgimg" src="" alt="" /></div>
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1770873 - 02.06.2009, 13:04:07
|
Mein Nick
Nicht registriert
|
Kleine verbesserung, die CSS-Methode width & height auf 100% zu setzen ging nicht, da sich das Bild dann zu gross macht - oder wenn man den Div-container nich auch auf 100% setzt gar nix veraendert. Dazu blieb das Bild wo es war - wegen position:absolute, man muss es auf fixed setzten, damit es mitscrolllt. Hier dann jetzt der - hoffentlich - richtige code: <script type="text/javascript">
window.onload = function () {
var w = document.body.clientWidth;
var h = document.body.clientHeight;
document.getElementById('hgimg').style.width = w + 'px';
document.getElementById('hgimg').style.height = h + 'px';
}
</script><style type="text/css">
<!--
table, font, b, i, script, img, div {
z-index:10;
position:relative;
}
div#hg {
z-index:0;
position:fixed;
left:0px;
top:0px;
}
img#hgimg {
z-index:0;
}
-->
</style>
<div id="hg"><img id="hgimg" src="" alt="" /></div>
Bearbeitet von Mein Nick (02.06.2009, 13:05:46)
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1770893 - 02.06.2009, 13:26:36
|
Registriert: 29.03.2007
Beiträge: 2.385
|
Sollte doch technisch vollkommen ausreichend sein - ist jetzt nur eine Ueberlegung anhand des Box-Modell - wenn man den body-overflow auf hidden setzt und die with auf 100% mit entsprechend negativem oder null z-index. Die absolute Positionierung kann in dieser Ueberlegung im img Tag auch stehen bleiben, da es anders nicht moeglich waere ( non-js Methode )
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: huendchen]
- #1771686 - 03.06.2009, 15:43:04
|
LNC Kai
Nicht registriert
|
Klappt leider immer noch nicht.  Das Bild liegt immer noch über der Homepage. Lg, Kai.
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1771717 - 03.06.2009, 16:55:49
|
Registriert: 29.03.2007
Beiträge: 2.385
|
Wenn du wirklich willst, dass man dir hilft, waere es ganz praktisch, wenn du einen Links zu der HP bereitstellst, auf der du es probierst. 75% aller Fehlerquellen liegen meist bei einem selber und die restlichen 15 an der Browserinkompatibilitaet - die Gewichtung koennte auch leicht anders sein aber hier in Knuddels liegt die Schuld meist beim User selber.
Link zur Seite bitte, damit man sich das evtl. anschauen kann.
|
|
[zum Seitenanfang]
|
|
|
Re: Hintergrundbild automatisch anpassen
[Re: ]
- #1771722 - 03.06.2009, 16:59:20
|
Mein Nick
Nicht registriert
|
div#hg {
z-index:-10;
position:fixed;
left:0px;
top:0px;
}
img#hgimg {
z-index:-10;
}
|
|
[zum Seitenanfang]
|
|
vorheriges Thema
Index