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:


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




    <div id="bg"><img id="BG" src="InstructionsBG.jpg" width="100%" height="100%"/></div>
    <div id="content">
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.



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!


9 Years
Discussion Span
Last Post by wickedsunny

The problem is your image is not a background image, just a normal image. This means your css for background-attachment does not actually do anything on your image. The easiest solution to this is to use a proper background (look up 'background-image') and that way it will stay fixed. If you also need to size the image, well that is going to require some thought...

I imagine the resizing is just something you added to make it nicer, but if it isn't a requirement, probably just get rid of it.


in simple words use a div and display the image through css in the div's background. like <div style="background:url()"; position:fixed;} blah blah i think u can understand wht i mean coz u know css.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.