hintergrundbild positionieren

[anja]

hallo!

Ich würde gerne auf dieser Site das hintergrundbild rechts unten so positionieren, dass es auch bei einer veränderung der bildschirmauflösung an der gleichen stelle ist.
außerdem würde ich gerne das rechteck in mitten des grauen hintergrundbereiches positionieren. wenn ich das ganze mit einer auflösung von 1024x768 anschau passt es, aber sobald die auflösung höher wird ist es nicht mehr in der mitte. kann mir da jemand weiterhelfen?

dies wäre die site:
http://www.hotel-hubertus.at/indextanja.htm

lg anja

[Detlef G.]

Hallo anja

Ich würde gerne auf dieser Site das hintergrundbild rechts unten so positionieren, dass es auch bei einer veränderung der bildschirmauflösung an der gleichen stelle ist.

  div#Seite {  
    ...  
    height:530px;  

damit setzt du eine feste Höhe, die dafür sorgt, dass bei größerem Seiteninhalt dieser in den grauen Rand wandert. Besser für Browser wäre:

min-height:530px;  
  
    ...  
    background-attachment:fixed;  

Damit bezieht sich die Position des Hintergrundbildes in standardkonformen Browsern auf den Viewport, nicht mehr auf #Seite. Ich würde das weglassen und dann ganz unten rechts positionieren.

Dazu dann für IE bis 6:

* html #Seite {  
    height:530px;  /* wird von IE wie min-height interpretiert */  
}  

... aber sobald die auflösung höher wird ist es nicht mehr in der mitte. kann mir da jemand weiterhelfen?

Das kann ich nicht nachvollziehen, bei mir bleibt es in der Mitte.

Auch wenn es keine drastischen Fehler sind, solltest du die Seite validieren.

Auf Wiederlesen
Detlef

[anja]

erst mal danke für die schnelle antwort!

background-attachment:fixed;
[/code]
Damit bezieht sich die Position des Hintergrundbildes in standardkonformen Browsern auf den Viewport, nicht mehr auf #Seite. Ich würde das weglassen und dann ganz unten rechts positionieren.

blöde frage, aber wie positioniere ich das dann unten und rechts? und ist es dann nicht wieder im grauen bereich??

... aber sobald die auflösung höher wird ist es nicht mehr in der mitte. kann mir da jemand weiterhelfen?

Das kann ich nicht nachvollziehen, bei mir bleibt es in der Mitte.

meine hier, dass das rechteck nicht in der mitte des grauen bereiches ist. also die ränder oben,unten, links und rechts sind nicht gleich.

lg anja

[Detlef G.]

Hallo anja

blöde frage, aber wie positioniere ich das dann unten und rechts? und ist es dann nicht wieder im grauen bereich??

Vielleicht solltest du mal in deinen Quelltext schauen ;-).
Dort steht bei dir:
    background-attachment:fixed; /* dies sorgt dafür, dass sich die Position nicht mehr auf #Seite bezieht, also weglassen */
    background-position:95% 100%; /* dies positioniert auf 95% von links und 100% von oben */

Vielleicht liest du dir auch noch einmal background-position (Hintergrundposition) durch.

meine hier, dass das rechteck nicht in der mitte des grauen bereiches ist. also die ränder oben,unten, links und rechts sind nicht gleich.

Du wolltest also auch eine vertikale Zentrierung?
Das ist nicht so einfach, wie eine horizontale.
Dazu kannst du mal in die FAQ schauen: Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Eine Möglichkeit, die die Probleme vermeidet, die bei kleineren Browserfenstern auftreten: CSS vertical centering using float and clear

Auf Wiederlesen
Detlef

[anja]

und hätt da gleich noch ne frage....würdest die navigation unten fixieren? weil wenn der inhalt ned so lang ist, dann verschiebt es sie mir nach oben und wenn es länger ist nach unten.

[Detlef G.]

Hallo anja

und hätt da gleich noch ne frage....würdest die navigation unten fixieren?

fixieren?
Du willst also, dass der Inhalt immer in einem kleinen Guckloch zu sehen ist.

weil wenn der inhalt ned so lang ist, dann verschiebt es sie mir nach oben

Du könntest das min-height (bzw. height für IE) bei #Seite weglassen und dafür #Inhalt geben, selbstverständlich um die Höhe der Navigation reduziert.

und wenn es länger ist nach unten.

Wenn du das wirklich vermeiden willst, also bei großen Browserfenstern den Gucklocheffekt haben willst, dann gib #Inhalt kein min-height sondern height _und_ overflow:auto.

Auf Wiederlesen
Detlef

[anja]

vielen dank für die große Hilfe!!

lg anja