ich habe im Footer ein background-image, welches welches 1015px breit ist. Dieses image ist um 430px nach rechts verschoben. Die Seite hat eine Breite von 1000px. Wenn ich nun das Browserfenster „zusammenschiebe“ (den Viewport verkleinere), was auch bei den mobilen Endgeräten der Fall ist, dann wird das Bild scrollbar. Sprich, die Seitenbreite vergrössert sich.
Meine CSS-Klasse, welche in einem DIV ist, sieht wie folgt aus:
Um etwas in den Minusbereich zu bekommen? Nein, das funktioniert leider nicht. Die Seite hat eine Breite von 1000px und das Bild (ebenfalls 1000px) im Footer soll 500px nach rechts verschoben werden, dabei sollte es nicht die Seitenbreite (also nicht scrollbar) bestimmen.
Genau so wie beim „DIV 3“ versuche ich es hinzubekommen. Leider funktioniert das bei mir nicht (Scrollbar wird angezeigt), ich denke, dass es was mit den relativen und absoluten Positionierungen, welche aber benötigt werden, zu tun hat.
Ich habe hier mal ein Beispiel aufgebaut. Das Hintergrundbild im Footer soll nicht scrollbar sein:
Also, ich habe mich vorhin mit dem „DIV 3“ auf den Link von @thecain bezogen. Die position’s habe ich gewählt, damit der Text nicht hinter dem Bild verschwindet. Auch nach dem „floaten“ der DIVs besteht das Phänomen noch → Scrollbar.
Irgendwie machst du etwas falsch. Der Inhalt eines Containers kann nicht hinter einem dem Container zugewiesenen Background-Image verschwinden. Für die Positionierung des Hintergrundbildes gibt es Attribute wie background-position und background-size. Das Background-Image selber nimmt auch keinen Raum ein. Wenn bei einem Container Scrollbalken erscheinen, hat es etwas mit dem darin liegenden Content zu tun.
Also, ich habe dem Div, in welchem sich das Bild befindet, die position: relative entnommen und dafür nun background-position: 430px; gegeben. Footer ist nun nicht mehr scrollbar, aber das Bild ist auch nicht mehr in der vollen Breite von sichtbar („abgeschnitten“).
ich habe mir grade mal deine Beiträge angeschaut. Was mir fehlt ist eine Beschreibung was du im Endeffekt überhaupt erreichen willst - ohne jegliche technischen Vorgaben.
Mein Ziel ist es im Footer meiner Seite ein Hintergrundbild zu platzieren, welches aber ausserhalb der Mitte (ca. 430 px) nach rechts verschoben dargestellt werden soll.
Wenn ich das Browserfenster nun auf die Seitenbreite von 1000px verkleinere, sollte das „überhängige“ Bild auf der rechten Seite nicht scrollbar sein. Sprich, die eigentliche Seitenbreite von 1000px sollte nicht durch das Hintergrundbild beeinflusst werden.
Hast Du die Beispieldatei bei JsFiddle getestet? Wenn das Browserfenster unter die 1000px kommt, dann ist es normal/richtig, dass die Scollbalken eingeblendet werden.