Hintergrundbild via css sprite dynamisch am Div Container anpassen.

[BallaBalla07]

Hallo Leute, ich habe folgendes Problem und komme einfach nicht weiter.

Ich habe alle Bilder in einer css sprites Datei.
Diese werden ja als Hintergrund auf die Website geladen.
Nun habe ich bei der Mobilen Ansicht das Problem dass das Bild über den Div Container hinausragt.

Dies habe ich in der Css Datei

.sprite-Fusszeile {
    margin:10px 10px -25px 10px;
    width:930px;
    height:30px;
    background:url(/images/sprite.jpg) -309px 0;
}

Ich habe es in der PHP Datei wie folgt eingebunden

<div class="sprite-Fusszeile"></div>

Bei maximaler Breite ist alles bestens.
Bei Mobiler Ansicht .. z.b. 480px Breite hat der Div Container eine Breite von 100%.
Aber das Hintergrundbild ragt darüberhinaus und ist seine 930 px breit.

@media screen and (max-width: 480px) {
.sprite-Fusszeile {
    width:430px;
    }
....

Gibt es eine Lösung hierfür .. oder müssen die Bilder dann in unterschiedlicher Größe abgespeichert werden?

LG

 

[Parantatatam]

Mit CSS3 könntest du es so lösen.