Layout-Bilder verschieben sich beim Verkleinern der Fenster

[TS84]

Also das Layout besteht aus zwei Bildern, die sich aber leider verschieben, wenn das Fenster verkleinert wird.

Im HTML sähe das so aus:

<img src="oben.jpg" id="top_image" width="1000">

Im CSS so:

#top_image{background-position:center top;}
body{width:1000;background-color:#cc0000;background-image:url("hg.jpg");background-position:center top;background-repeat:repeat-y;}

Weiß jemand von euch da eine schnelle Möglichkeit dieses Manko zu beheben?

[do_while]

Also ohne Link zur Seite ist das nur theoretisches Raten.

Was mir erstmal aufgefallen ist:
1) Du wendest auf ein Bild #top_image eine background-position an, für das Bild ist aber kein Background definiert, das Bild wirst Du damit nicht positionieren können.
2) body eine Breite zu geben ist ungewöhnlich, denn dazu gibt es im Layout Container-DIVs, mit denen man das erledigt.
3) die Angabe von width:1000 in CSS ist ohne Einheit witzlos, Du meist sicherlich width:1000px

[Andreas]

Mir ist auch noch etwas aufgefallen.

1. Wenn du nicht so fit in HTML bist, dann kannst du Contao den Code generieren lassen, dafür ist es ja da. ALT ist ein Pflichtattribut und wenn man WIDTH angibt, dann sollte man auch HEIGHT angeben.

<!-- falsch -->
<img src="oben.jpg" id="top_image" width="1000">

<!-- richtig -->
<img src="files/images/layout/oben.jpg" id="top_image" width="1000" height="560" alt="irgendwas oder leer">

Bilder müssen auch im Ordner files/ liegen und wenn du den Pfad hier hardcodierst, dann profitierst du nicht von dem intelligenten DBAFS in Contao.

2. So wie du den CSS-Code anbietest ist das kaum zu lesen. Das sollte so aussehen.

#top_image {
  background-position: center top; /* macht keinen Sinn */
}
body {
  width: 1000; /* falsch und nicht empfehlenswert */
  background-color: #cc0000;
  background-image: url("hg.jpg"); /* deine Bilder müssen im Ordner files/ liegen */
  background-position: center top;
  background-repeat: repeat-y;
}