PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hintergrundbild zentrieren und skalieren?

Meth
2003-10-01, 17:10:12
Moin,
wie kann ich in HTML ein Hintergrundbild zentrieren und skalieren?



Thx Meth
winter
2003-10-01, 21:07:06
Zentrieren ist nicht dierekt das problem, aber skalieren mach IMMER Probleme. Ich habe dafür eine Lösung geschrieben, die FRISST aber Speicher und ist Lahm. Dafür funktioniert sie Gut.
Meth
2003-10-01, 21:25:07
dann sag mir bitte wie man zentriert und erklär das mit dem skalieren!
Black-Scorpion
2003-10-01, 22:01:14
Zentrieren kannst du so.
<body style="background-image:url(bild.gif); background-repeat:no-repeat; background-position:50% 50%">
Für die "50%" kannst du auch "center" verwenden.
Meth
2003-10-01, 22:58:51
danke, werds dann morgen mal ausprobieren!
winter
2003-10-03, 20:51:15
Ich habe das *Größenproblem* mit Layern gelöst:


<!-- Header --><body>

<!-- Hintergrundebene -->
<div style="position:absolute; top:0; left:0; bottom:0; width:100%; height:100%; z-index:1;">
<!-- Hintergrundbild -->
<img src="images/style/background.jpg" height="100%" width="100%">

</div>


<!-- Hauptebene -->
<div style="position:absolute; height:100%; width:100%; overflow:auto; z-index:2; filter:Alpha(opacity=70);">

<!-- Hier Content einfügen -->

</div></body>

Der Alpha Filter ist dabei als netter Effekt für den IE gedacht.
Die Mozilla variante habe ich weggelassen, da diese Darstellungsfehler verursacht hat.
Für normale Seiten würde ich empfehlen den Filter zu wegzulassen.

Hat bisher auf keinem Browser zu Problemen geführt, für weitere Erfahrungen (Konquerer, Mac Netscape/IE) währe ich dankbar.
Meth
2003-10-03, 20:59:28
wow danke,
kannst du mir bitte noch erklären was "top:0; left:0; bottom:0;" und "z-index:1;" bewirkt?
winter
2003-10-03, 21:04:14
top, und left geben den abstand vom oberen bzw linkem Rand an. bottom habe ich aus kompatibilitätsgründen dazu genommen (Gab Probleme mit Opera). Sollte jetzt keine schwierigkeiten mehr machen. Wenn du einen Hintergrund haben willst, der nicht 100% groß ist, aber eine Relative größe haben soll und ausgerichtet werden soll, schreibst du einfach eine kleine tabelle um den BG: <table border=0 height=100% width=100%><tr><td cellpadding=0 cellspacing=0 align=center valign=center><!-- Hintergrund --></table>

Z-Index:1 Legt den div-Layer als erste (und damit tiefste) Ebene fest. Die zweite Ebene wird ensprechend nummeriert.
Meth
2003-10-03, 21:22:00
cool danke!
also könnte ich mit mehreren layern mehrere Bilder übereinander legen?
Jetzt muss ich nurnoch wissen was "overflow:auto" bewirkt ;)

thx Meth
winter
2003-10-03, 21:27:52
Man kann mit Layern praktisch alles Übereinander legen.
Es ist AFAIK sogar mit flash Animationen möglich.

overflow funktioniert nur bei DIV layern und bewirkt, das Scrollleisten innerhalb dieser Layer angezeigt werden, so das s überschüssiger text den Bereich nicht vergrößert (Sieht etwa aus wie ein Iframe, nur ist eben keiner). Auto ist eben der wert für das automatische (passt content in box, bleiben scrollbars weg)