[ERLEDIGT] Footer 100% mit Image mittig scrollt

[HannemannMediaAG]

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

.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;
}

Grüsse

 

[scbawik]

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

.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;
}

Grüsse

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

 

[HannemannMediaAG]

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

 

[Banana_Jones]

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;
}

 

[scbawik]

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

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%;
}

 

[HannemannMediaAG]

So einfach... Besten Dank dafür.

 

[Tronjer]

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