Footer 100% mit Image mittig scrollt

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe im Footerbereich ein Image (class=„footerWrapper“) (2000 x 155px) mittig ausgerichtet. Nun übernimmt der Viewport ständig diese 2000px. Overflow=„hidden“ funktioniert dort auch nicht. -.-

Hätte jemand noch einen Lösungsansatz? Besten Dank. Hier noch der Link und die 2 Klassen:

www.hannemann-media.ch/clients/ndof_wp

[CODE].footerContent {
position: relative;
height: 155px;
width: 100%;
overflow: hidden;
}

.footerWrapper {
background: url(img/footer-bg.png) no-repeat;
position: absolute;
height: 155px;
width: 2000px;
left: 50%;
margin-left: -1000px;
}
[/CODE]

Grüsse

2

Hast du das Fenster jemals auf über 2000 skaliert? Bei mir passt zumindest alles.

3

Ja, das habe ich. Genau, dann passt es auch. Aber nicht, wenn das Fenster z. B. auf 1000px skaliert wird.

4

Wenns unbedingt bei der absoluten Positionierung bleiben soll:

.footerWrapper { background: url(img/footer-bg.png) no-repeat 50%; position: absolute; height: 155px; left: 0; right: 0; }

5

Achso. Jetzt versteh ich es.

Wieso machst du es so kompliziert, mit negative Margin usw.?

.footerWrapper { background: url(img/footer-bg.png) no-repeat center; height: 155px; width: 100%; }

6

:smiley: So einfach… Besten Dank dafür.

7

Falls das Backgroundimage skalieren soll, gib ihm backgroundsize: contain.