HTML and CSS

Help needed with fixed background!

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2007

Posts: 11

Reputation: k8f1 is an unknown quantity at this point

Solved Threads: 1

k8f1

Offline

Newbie Poster

Help needed with fixed background!

Nov 5th, 2008

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:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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

Last edited by peter_budo; Nov 9th, 2008 at 5:27 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

•

Join Date: Mar 2007

Posts: 686

Reputation: sillyboy is on a distinguished road

Solved Threads: 61

sillyboy

Offline

Practically a Master Poster

Re: Help needed with fixed background!

Nov 6th, 2008

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.

http://www.happypolla.com

•

Join Date: Oct 2008

Posts: 89

Reputation: wickedsunny is an unknown quantity at this point

Solved Threads: 4

wickedsunny wickedsunny is offline

Offline

Junior Poster in Training

Re: Help needed with fixed background!

Nov 7th, 2008

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.

Ayaz Malik
Free online Photoshop/Drawing | Art Community