Hi,
I'm trying to create a html page which allows the text to scroll without moving the background. I understand that I should probably be using something like:
background-attachment: fixed;
but the complication is that I have an image which covers the whole background and resizes itself depending on the screen size (without repeating itself). My code looks like this at the moment:
<html>
<head><title>About The Organism</title>
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0; background-attachment: fixed; }
#bg {position:absolute; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img id="BG" src="InstructionsBG.jpg" width="100%" height="100%"/></div>
<div id="content">
<center>
All the world's a stage,<br /><br /><br />
And all the men and women merely players;<br /><br /><br />
They have their exits and their entrances,<br /><br /><br />
And one man in his time plays many parts,<br /><br /><br />
His acts being seven ages. At first, the infant,<br /><br /><br />
Mewling and puking in the nurse's arms.<br /><br /><br />
Then the whining schoolboy, with his satchel<br /><br /><br />
And shining morning face, creeping like snail<br /><br /><br />
Unwillingly to school. And then the lover,<br /><br /><br />
Sighing like furnace, with a woeful ballad<br /><br /><br />
Made to his mistress' eyebrow. Then a soldier,<br /><br /><br />
Full of strange oaths and bearded like the pard,<br /><br /><br />
Jealous in honor, sudden and quick in quarrel,<br /><br /><br />
Seeking the bubble reputation<br /><br /><br />
Even in the cannon's mouth. And then the justice,<br /><br /><br />
In fair round belly with good capon lined,<br /><br /><br />
With eyes severe and beard of formal cut,<br /><br /><br />
Full of wise saws and modern instances;<br /><br /><br />
And so he plays his part. The sixth age shifts<br /><br /><br />
Into the lean and slippered pantaloon,<br /><br /><br />
With spectacles on nose and pouch on side;<br /><br /><br />
His youthful hose, well saved, a world too wide<br /><br /><br />
For his shrunk shank, and his big manly voice,<br /><br /><br />
Turning again toward childish treble, pipes<br /><br /><br />
And whistles in his sound. Last scene of all,<br /><br /><br />
That ends this strange eventful history,<br /><br /><br />
Is second childishness and mere oblivion,<br /><br /><br />
Sans teeth, sans eyes, sans taste, sans everything.
</center>
</div>
</body>
</html>The re-sizing bit works perfectly, but it doesn't seem to want to work with the fixed background bit. (Hope this makes sense)Any ideas? (Unfortunatley I'm very pushed for time as this is for a piece of coursework thats due in tommorrow! I'd still be grateful of any help after this though - just out of interest and for future use).
Thank you!
Kate
