Bilder fest positionieren

[holmix]

Hallo,
Ich hänge gerade an einem ziemlich kniffligen Problem und zwar habe ich per
body {
  font-family:sans-serif;
  background: url(...jpg) no-repeat center center fixed;
  background-size: 100%;
  overflow: auto;

usw. ein hintergrundbild festgelegt. Wie ihr sehen könnt passt sich das bild immer der Auflösung des jwlgn. Bildschirms an. Allerdings versuche ich jetzt über das Hintergrundbild via

<a href="..."><img src="...jpg" style="position:absolute; background:transparent; top:35px; left:904px;" height="90" alt="..."/></a>

ein bild an einer ganz bestimmten Position des Bildes als Link einzusetzten. jetzt meine Frage: wie ist es möglich, trotz der Größenänderung des hintergrundbildes für mein LinkBild immer die gleiche Position auf dem Hintergrundbild zu behalten?

Vielen Dank schonmal für eure Antworten!

[misterunknown]

Moin,

wie ist es möglich, trotz der Größenänderung des hintergrundbildes für mein LinkBild immer die gleiche Position auf dem Hintergrundbild zu behalten?

Ich würde mal denken, dass das nicht möglich ist. Zumindest mit prozentualen Angaben für top und left geht das nicht. Man könnte eventuell mit Javascript etwas basteln, aber das wäre ziemliches gefrickel.

Meine Frage wäre: Was willst du denn genau machen? Vielleicht gibt es eine einfache, bessere Lösung.

Grüße Marco

[holmi]

Also es geht um diese Seite: http://samuelholmer.bplaced.net/
das Mädchen soll die Luftballons in der Hand halten und die
 Luftballons sollen die Links sein... allerdings wäre es eben
 schön wenn der Hintergrund sich über den ganzen Browser ausdehnt...

[Matthias Apsel]

Om nah hoo pez nyeetz, holmi!

Also es geht um diese Seite: http://samuelholmer.bplaced.net/
das Mädchen soll die Luftballons in der Hand halten und die
Luftballons sollen die Links sein... allerdings wäre es eben
schön wenn der Hintergrund sich über den ganzen Browser ausdehnt...

Du könntest CSS rechnen lassen. Für Browser, die das nicht können, kannst du die Rechnungen auch JS ausführen lassen.

Matthias

[Holmix]

Ok, was müsste ich denn da genau ausrechnen lassen?

[Matthias Apsel]

Om nah hoo pez nyeetz, Holmix!

Ok, was müsste ich denn da genau ausrechnen lassen?

Ich würde ein Hintergrundbild nehmen, dass seine Größe nicht ändert. Ab einer gewissen Fenstergröße würde ich farbige Ränder (muss ja nicht weiß sein) akzeptieren. Dann ist der Mittelpunkt des Hintergrundbildes immer in der Mitte des Fensters.

top: calc (50% - gewünschter Abstand von der Mitte)

Unterstützung wird besser

Matthias

[misterunknown]

Moin,

top: calc (50% - gewünschter Abstand von der Mitte)

Das ändert nichts daran, dass die Werte beim  Verschieben nichts ändern. Ich habe in meinem Beispiel jetzt in einer gewissen Viewportgröße eingestellt, dass das kleine Zip-Icon genau in der linken oberen Ecke des großen ist. Beim skalieren des Browsers stimmt die Position trotzdem nicht. Oder hab ich hier einen gewaltigen Denkfehler?

Grüße Marco

[1UnitedPower]

Moin,

top: calc (50% - gewünschter Abstand von der Mitte)

Das ändert nichts daran, dass die Werte beim  Verschieben nichts ändern.

Der Beispiel-Code erweckt nur auf den ersten Blick den Anschein, die Positionierung relativ zum Mittelpunkt des VP vorzunehmen. Mir fällt im Moment keine Lösung ohne zusätzliches Markup ein.

[Matthias Apsel]

Om nah hoo pez nyeetz, 1UnitedPower!

Der Beispiel-Code erweckt nur auf den ersten Blick den Anschein, die Positionierung relativ zum Mittelpunkt des VP vorzunehmen. Mir fällt im Moment keine Lösung ohne zusätzliches Markup ein.

Der BeispielCode nimmt eine Positionierung relativ zum Mittelpunkt des VP vor. Deshalb funktioniert meine Idee auch nur bei einem Hintergrundbild fester Größe.

Wenn man ein mitwachsendes Hintergrundbild haben möchte, könnte man auch die Größen der Linkelemente prozentual angeben und dann sollte auch ohne zusätzliches Markup eine Positionierung möglich sein. Dann vielleicht sogar ohne calc()

etwa ein Luftballon der stets 20% oberhalb und 10% links der Mitte ist

a#luba1  
{  
  width: 8%;  
  height: 16%;  
  position: absolute;  
  bottom: 30%;  
  right: 40%;  
  background: luftballon;  
  background-size: 100%;  
}

sollte nicht völlig daneben gehen.

Matthias

[Holmix]

Ah danke super das hat funktioniert... mein problem war dass ich bisher nur die höhe prozentual angegeben hatte... aber wenn ich auch die breite so angebe dann behält er zumindest meistens eine einigermaßen gute form :)

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Moin,

top: calc (50% - gewünschter Abstand von der Mitte)

Beim skalieren des Browsers stimmt die Position trotzdem nicht. Oder hab ich hier einen gewaltigen Denkfehler?

Bei einem _unskalierten_ Hintergrundbild sollte es funktionieren.

Matthias

[Gunnar Bittersmann]

@@holmi:

nuqneH

Also es geht um diese Seite: http://samuelholmer.bplaced.net/
das Mädchen soll die Luftballons in der Hand halten

Tut es nicht. Screenshot, 2fach verkleinert:

Weißer Adler auf weißen Grund. Da solltest du nachbessern.

Qapla'

[Holmix]

:D ja daran arbeit ich ja gerade... deehalb habe ich ja erklärt wie es aussehen soll ;)

[1UnitedPower]

:D ja daran arbeit ich ja gerade... deehalb habe ich ja erklärt wie es aussehen soll ;)

Gunnar hat probiert dich subtil darauf hinzuweisen, dass du besondere Probleme bekommst, falls der Viewport ein kleineres Seitenverhältnis (x/y) als dein Hintergrundbild hat. In dem Fall hast du nämlich oben und unten Bereiche, die nicht von deinem Hintergrundbild abgedeckt werden.

[Holmix]

Achso..! ja. ich denke aber dass 1024 auf 768 ja doch eigentlich nicht allzu breit angelegt ist. und eigentlich ist.
also ich gehe eher von einer breiteren auflösung aus :D

[1UnitedPower]

also ich gehe eher von einer breiteren auflösung aus :D

Was gefährlich ist. Nicht jeder betreibt seinen Browser ständig im maximierten Modus. Und ebenfalls nicht jeder hält sein Smartphone beim Surfen horizontal.

[1UnitedPower]

Ich würde mal denken, dass das nicht möglich ist. Zumindest mit prozentualen Angaben für top und left geht das nicht.

Prozentuale Positionsangaben sind schonmal ein guter erster Schritt. Der eigentliche Trick besteht dann noch darin, dein Bild relativ zum Mittelpunkt des Viewports zu verschieben, eben genau wie dein Hintergrundbild.

Meine Frage wäre: Was willst du denn genau machen? Vielleicht gibt es eine einfache, bessere Lösung.

Dem schließ ich mich an.

[Holmix]

Prozentuale Positionsangaben sind schonmal ein guter erster Schritt. Der eigentliche Trick besteht dann noch darin, dein Bild relativ zum Mittelpunkt des Viewports zu verschieben, eben genau wie dein Hintergrundbild.

Wie würde das denn gehen?