• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fixiertes Bild am unteren Bilschirmrand

P

phzu

Neues Mitglied
Hallo!

Mein Vorhaben ist etwas aussergewoehnlich, vielleicht habe ich deshalb keinen passenden Titel gefunden.

Und zwar moechte ich, auf einer Seite, bei der der Inhalt in der Breite fixiert ist (960px) am unteren Bildschirmrand ein Bild auf die volle Breite skaliert, welches sich beim scrollen nicht bewegt.

Momentan bekommt das <body> Tag via CSS die Breite zugewiesen.

MUSS ich um mein Vorhaben umzusetzen den Body-Tag auf 100% Breite einstellen und die Seite in einem weiteren Container aufbauen, oder gibt es eine andere Moeglichkeit?

lg Philip
 
Für moderne Browser könntest Du das Bild als Hintergrundbild im body definieren und per background-size auf die volle Breite bringen. Geht aber wie gesagt nur in modernen Browsern - IE macht da imho nicht mit.

Alternativ kannst Du auch ein <img>-Element absolut am unteren Ende des Viewports positionieren ("bottom: 0;") und diesem die Breite von 100% geben.

In beiden Fällen könntest Du das Problem haben, dass das Bild durch die Skalierung unscharf wird - je nachdem wie breit der Viewport ist.
 
Erstmal vielen Dank fuer die Antwort!

An das Problem mit der Unschaerfe hab ich noch gar nicht gedacht, da hast du natuerlich recht.

Zu deiner 1. Loesung:
Das hab ich mir gedacht, allerdings hab ich das Problem, dass auf meiner aktuellen Seite der Body-Tag in der Breite fixiert ist. (960px) Somit wuerde ein Bild mit 100% Breite ja wieder nur 960px breit werden...

2. Loesung:
Das Bild soll praktisch als Hintergrundbild eingebunden werden. Habe ich vergessen zu erwaehnen. Als Img-Element verdraengt es doch den Text oder?

Das Bild soll zwei Fussballspieler am rechten und linken Rand des Viewports darstellen, was ich aus den Aufloesungsproblemen auf einen links/rechts reduzieren werde....

lg
 
Kannst ja mal versuchen das Hintergrundbild an das <html>-Element zu hängen ;)

Ein absolut positioniertes Element würde keinen Text verdrängen - allerdings diesen schlimmstenfalls überlagern.
 
Werd ich mal versuchen. Allerdings habe ich gelesen, dass es Darstellungsprobleme in FF, Chrome, Safari, IE, Opera, Netscape und Konqueror etc. geben soll. Sowohl in alten als auch aktuellen Versionen!

Vielen Dank fuer die Hilfe! :D
 
Hallo,

glaube glaube hast ein generellen gedanken fehler.
Body-Tag in der Breite fixiert ist. (960px)
Zum Vergrößern anklicken....
Du kannst doch nicht den Body auf eine breite begrenzen, wass soll da passieren, soll sich mein Browserfenster vielleicht auf die größe anpassen :O).
html und Body ist immer mindest 100% breit, sonst bekommst auch bei vielen anderen scripte probleme wie Zoom da die davon ausgeben das html/body 100% ist und das zoom bild darin ausrichten.

Cheffchen
 
Reden wir gerade völlig aneinander vorbei oder verarscht mich der Autor meines HTML-Büchleins ;)

Ich kann doch dem Body-Element problemlos eine Breite zuweisen und das Ganze zentrieren, oder nicht? Habe ich bisher darum gemacht, damit meine Seite nicht über die volle Breite des Bildschirms geht, da es bei Widesreen-Bildschirmen schnell unübersichtlich wird und unangenehm zu lesen...

Nun würde ich gerne in den entstandenen Rändern links und rechts ein Bild darstellen.
Wollte hier nur fragen ob das ohne größere Layoutänderungen möglich ist....

lg
 
Hallo,

ich kenn dein büchlein nicht aber weis das es nur ärger macht wenn man body eine breite gibt.
Wenn bis her noch kein hattest ist doch ok aber wundere dich halt nicht oder zumindest weist schon mal wo rann es liegen kann.

ansonsten kannst wie oben schn beschrieben ein div machen mit etwas css
Code: 
#footer {
position: fixed;
height: 90px;
width: 100%;
bottom: 0;
left:0;
background:url(bild.jpg) center repeat;
}

Cheffchen
 
Das das Probleme machen kann ist mir (zum Glueck) noch nicht aufgefallen.

Ich werde in dem Fall in Zukunft ohne dieser Angabe weitermachen.
 
Das Problem mit der Unschärfe kann man umgehen, wenn man das Bild nicht mitskaliert sondern in der Hintergrundfarbe auslaufen lässt (Photoshop etc.).
In Deinem Fall in den Footer zwei Divs packen, das eine links, das andere rechts ausrichten, Hintergrundbilder rein, das linke nach rechts auslaufen lassen und umgekehrt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben