CSS: Hintergrundbild im Footer soll in x nicht scrollbar sein

html.de-Forum HTML, XHTML & CSS
1

Hallo,

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:

.footer-trees-bg { background: url('img/trees-footer.png') no-repeat; height: 321px; width: 1015px; left: 430px; position: relative; }

Gibt es eine Möglichkeit, dieses Footer background-image nicht scrollbar zu machen?

2

Die Seitenbreite vergrössert sich nicht, die bleibt genau so breit wie du sie definiert hast…

Warum hast du position relative eingesetzt?

3

Damit ich das Bild nach rechts (left: 430px) verschoben bekomme.

4

Wieso das? Wäre float nicht passender?

5

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.

6

wie wäre es mit background-position?

7

Dann wird das Bild (alles was über den Seitencontent hinausgeht) „abgeschnitten“ und ist nicht mehr sichtbar.

8

hä? es soll nicht über die Seite raus, es soll 1000px breit sein und 500px abstand haben und man soll nicht scrollen…

Irgendetwas passt da nicht rein

9

Es soll über die Seite hinaus schauen (nämlich 500px über den rechten Rand), aber nicht scrollbar sein.

10

https://developer.mozilla.org/de/docs/Web/CSS/overflow-x

11

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:

http://jsfiddle.net/tightman/9C4wn/

12

Für was werden die benötigt? Die drei Div im Footer sollten gefloatet werden.

13

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.

14

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.

15

Ja, irgendwas mache ich falsch, das stimmt schon. :smiley:

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“).

http://jsfiddle.net/tightman/9C4wn/1/

16

Ein overflow: visible bringt leider nicht das gewünschte Ergebnis → Bild wird nach wie vor abgeschnitten.

Wie bekomme ich dieses nun in seiner vollen Breite sichtbar?

17

Hallo,

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.

Gruss

MrMurphy

18

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.

19

Wird doch nicht beeinflusst. Wenn das Browserfenster kleiner als 1000px breit ist, werden Scrollbalken eingeblendet.

20

Hast Du die Beispieldatei bei JsFiddle getestet? Wenn das Browserfenster unter die 1000px kommt, dann ist es normal/richtig, dass die Scollbalken eingeblendet werden.