nicht angemeldet
2 fixe Hintergründe in einer Seite! Wie?
0 0 0 Danke
2 fixe Hintergründe in einer Seite! Wie?
Hallo Programmierfreunde!
Bin am Verzweifeln!
Mein Problem: Ich hab einen Hintergrund definiert, fix im oberen linken Eck bleibend!
body {
font-family: times, arial, helvetica;
font-size:15pt;
color: black;
background-image:url(../bilder/gifs/bogen4.gif);
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
Funktioniert auch einwandfrei. Nun wurde mir befohlen, im linken unteren Eck auch eine Grafik fix zu stellen, die sich aber anpassen muss. Hab aber keine Ahnung, wie man 2 Hintergründe definieren könnte und damit schon sehr viel Zeit verschwendet! Meine Frage: Kann man es überhaupt bewerkstelligen, in einer Seite 2 fixe Hintergründe zu definieren (linkes oberes Eck und linkes unteres Eck)?
Bitte helft mir, wäre nicht ganz undringend.
Danke im Vorraus und noch einen schönen, problemfreien Tag!
Mfg
Barracha
-
Hallo,
habe auch darüber gegrübelt und bin zu folgendem Ergebnis gekommen:
Hae ein Hindergrundbild definiert und darüber eine Ebene <div> inklusive z-index gesetzt. Es funzt.
LG André
-
Hallo,
habe auch darüber gegrübelt und bin zu folgendem Ergebnis gekommen:
Hae ein Hindergrundbild definiert und darüber eine Ebene <div> inklusive z-index gesetzt. Es funzt.
LG André
Dankeschön!
Könntest mir noch liebenswerterweise den Quelltext dazu zeigen?
Mfg
Barracha
-
-
hi,
du kannst im body nicht 2 hintergrundbilder auf einmal einbinden. also muss das 2te bild irgendwo anders hin. zum beispiel in einen <div>-layer. in CSS gibt es das schöne attribut "position:fixed". ein HTML-element mit diesem attribut bleibt, egal wie viel gescrollt wird, immer an der selben stelle (wie der gefixte hintergrund). mit hilfe von "left:wert" und "top:wert" (oder auch "right" und "bottom") kannst Du das element positionieren. näheres dazu findest Du in Selfhtml --> CSS --> Positionierung.
so weit die theorie. leider gibt es aber ein paar praxis-probleme:
- mozilla und opera sind sich uneinig daüber, ob das hintergrundbild eines gefixten layers beim scrollen der ganzen seite auf gefixed bleibt (klingt für mich einleuchtend), oder ob es mitgescrollt wird (???). desswegen solltest du die graphik nicht als layer-hintergrund sondern als <img>-element einbinden. also in etwa:
<div style="position:fixed,...">
<img src="graphik.gif" ...>
</div>- der IE versteht position:fixed leider nicht. es gibt aber ein workaround um dies (bei IE >= 5.0) zu simulieren. hierzu ein paar links:
http://www.fabrice-pascal.de/artikel/posfixedie6/
http://devnull.tagsoup.com/fixed/
im wesentlichen ist der trick, alle nicht gefixten elemente (also alle die mitgescrollt werden) in einen grossen container-layer zu schreiben, diesen mit style="width:100%;height:100%" über den gesammten <body> auszudehnen und die zu fixenden elemente mit "position:absolute" über diesem layer zu positionieren. der container kann gescrollt werden, die gefixten elemente bleiben fext im <body> liegen. klingt merkwürdig? ist es auch :)
da dieser workaround "nicht ganz koscher" ist, rate ich Dir dazu alles sorgfältig in mindestens Mozilla, Opera, IE5.0 und IE 6 und unter verschiedenen auflösungen zu testen.ich hab sowas auf meiner seite realisiert, hier ist der link zu einem (halbherzigen) demo davon:
http://www.your-boredom.de/trash/fixed.html
schnüffel ein bisschen im (css)-code rum, vielleicht hilfts Dir ja.ich weiss nicht ob der stress die ganze sache wert ist (es geht ja *nur* um eine ziergraphik, aber das kannst Du ja selbst entscheiden.
schö
stefan-
Danke an alle, die geantwortet haben! Wirklich nett, dass ihr euch so viel Zeit genommen habt! Ihr ward eine große Hilfe! Merci beaucoup!