2012-04-05 17 views
2

Ich habe nicht zu viele CSS-Fragen hier gefragt, also hier geht es.Kill Horizontal Scroll auf Absolute Bild mit Körper als Eltern

Sagen wir, ich habe eine Seite:

<body> 
    <div id="wrap">//page containment, etc.. goes here..</div> 
    <img class="custom-bg" src="example.jpg" /> 
</body> 

Dann schreibe ich einige CSS für das Bild, insbesondere:

#wrap { 
    z-index: 100; 
} 
img.custom-bg { 
    position: absolute; 
    top: 1000px; 
    left: 50%; 
    margin-left: -960px //the image is 1290px wide 
    z-index: 0; 
} 

Wenn Sie jetzt nicht sagen, ja, ich bin Versuchen, ein Hintergrundbild mit absoluter Positionierung zu erstellen. Ja, ich weiß, ich kann das Bild einfach als Hintergrund für das Body-Tag festlegen und Positionieren verwenden, um es zu platzieren, aber um dieser Frage willen, sagen wir, dass das keine Option für mich ist.

Das Problem ist das Auftreten von horizontalen Bildlaufleisten. Google ist voller Beispiele dafür, wie Leute Überläufe und andere Dinge ausschalten, aber ich bin neugierig, ob jemand einen bestimmten Ansatz zum Entfernen von horizontalen Bildlaufleisten gefunden hat, wenn er so etwas wie oben ausführt. Ein absolutes Bild, das glücklich für sich selbst lebt. Zentriert. Und nicht an das Fenster "angehängt" ... Dadurch muss der Browser nicht mehr wissen, dass ein Bild wirklich groß ist und nur durch horizontales Scrollen sichtbar ist.

Jeder Einblick wäre genial. Ich habe so wenig Code wie möglich eingefügt, damit Leute, die nach diesem Beispiel suchen und neu im Webentwickler sind, leicht verstehen können, wie sie ihr Problem hinsichtlich absoluter Positionierung und horizontalem Scrollen lösen können.

+0

Wenn Sie in die Situation kommen, dass Sie Ihre Benutzer-Steuerelemente deaktivieren, dann besser an das Zeichenbrett zurück zu gehen und darüber nachdenken, ein besseres Design anstatt zu versuchen, den Browser zurück zu 1995. –

+0

zu hacken Ha, großes Zitat. Aber das ist hier nicht der Fall. Ich frage nur, ob es möglich ist, Hintergrundbilder zu erstellen, ohne die Hintergrundeigenschaft in CSS zu verwenden. Es ist egal, warum. Vielleicht möchte ich sie oder etwas animieren, weißt du .. Vielleicht möchte ich "mehrere" Hintergrundbilder ohne CSS3 verwenden. – spez86

Antwort

1

Ich habe den Punkt hier vielleicht verpasst, aber warum verwenden Sie nicht stattdessen position:fixed?

http://jsfiddle.net/shanethehat/7MetS/

+0

Das Bild sollte nicht fixiert bleiben, wenn die Seite vertikal gescrollt wird. Es sollte sich wie ein Hintergrundbild verhalten und sich verhalten, das im Körper ist ... während es nicht eins ist ... macht das Sinn? – spez86

Verwandte Themen