man nehme einen layer (<div>) und platziere ihn per "position: absolute;" irgendwo auf der seite. dann fuege man eine ganze menge text, die eigenschaft "overflow: auto;" und ein hintergrundbild hinzu.
jetzt faellt schon auf, dass das hintergrundbild beim scrollen stehen bleibt. eigentlich sollte es das nicht tun. die angabe der eigenschaft "background-attachment: scroll;" hilft hier auch herzlich wenig.
und wenn man nun "background-attachment: fixed;" schreibt, verrutscht das hintergrundbild, es wird nun nicht mehr am punkt (0, 0) des layers, sondern am punk (0, 0) des body festgemacht.
das is sehr unschoen.
stelle ich mich hier doof an, oder is das tatsaechlich ein bug? wenn ja, taete mir wer den gefallen, den bei bugzilla reinzutun? ich meld mich da nich erst an.
ein wenig reproduction code:
jetzt faellt schon auf, dass das hintergrundbild beim scrollen stehen bleibt. eigentlich sollte es das nicht tun. die angabe der eigenschaft "background-attachment: scroll;" hilft hier auch herzlich wenig.
und wenn man nun "background-attachment: fixed;" schreibt, verrutscht das hintergrundbild, es wird nun nicht mehr am punkt (0, 0) des layers, sondern am punk (0, 0) des body festgemacht.
das is sehr unschoen.
stelle ich mich hier doof an, oder is das tatsaechlich ein bug? wenn ja, taete mir wer den gefallen, den bei bugzilla reinzutun? ich meld mich da nich erst an.
ein wenig reproduction code:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>"background-attachment: fixed;" considered harmful</title>
</head>
<body>
<div style="position: absolute; top: 100px; left: 100px; width: 280px; height: 220px; border: 1px solid red; overflow: auto; background-image: url(logo.gif); background-attachment: fixed;">
here is a long text about google
</p>
here is a long text about google
</p>
here is a long text about google
</p>
here is a long text about google
</p>
here is a long text about google
</p>
here is a long text about google
</p>
</div>
</body>
</html>
Kommentar