Code:
#village { background-color: green; position: absolute; overflow: scroll; height: 100%; width: calc(100% - 462px); } #overview { height: calc(100% - 50px); margin-top: 24px; margin-bottom: 24px; background-image: url("graphic/village.jpg"); -webkit-background-size: 100% auto; background-repeat: no-repeat; background-position: center; }
Code:
<img style='margin: 25%; width: 10%; position: relative;' src='graphic/buildings/main.png'>
Das Problem ist schwer zu beschreiben, aber ich versuche es: Lasse ich die Seite laden, während mein Browser normal groß ist, ist alles gut. Ändere ich die Größe meines Browsers nun in der Breite, benehmen sich die Bilder so, als hätte ich die Größe gleichzeitig in der Höhe verändert.
Was ich also bräuchte wäre eine Art vertical-align damit die Elemente in #overview sich auch dem Hintergrund anpassen, wenn die Größe des Browsers verändert wird. Das Hintergrundbild ist nämlich immer vertikal zentriert.
Ich hoffe das war irgendwie verständlich
Kommentar