Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help needed with fixed background!

    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

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    A few things to note:

    The only way to fix a background is via the background-image and background-attachment properties. The latter is not supported in IE6 and earlier IE versions, but a b/g image which fails to be fixed may not necessarily be a major design consideration to all.

    The background-image source file has to be manually resized (in a photo-editing program) to suitably fit the background container, as the CSS cannot do this - well, not yet until the relevant CSS3 property to do this becomes more widely supported by the browsers.

    You can apply the background-image and background-attachment properties to the <body> or a <div> container. Using the <body>, as done here, can be simpler.

    And finally, the large collection of <br> tags here can be dispensed with, in favour of a set of <p> tags around each line, and some CSS to handle the enclosed text.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>About The Organism</title>
    
    <style type="text/css">
    
    *          { margin: 0; padding: 0; border: none; }
    html, body { height: 100%; width: 100%; }
    
    body       { background-image: url(InstructionsBG.jpg);
                 background-repeat: no-repeat;
                 background-attachment: fixed; }
    
    #content p { margin-top: 2em; text-align: center; }
    
    </style>
    </head>
    <body>
    
      <div id="content">
    
        <p>All the world's a stage,</p>
        <p>And all the men and women merely players;</p>
        <p>They have their exits and their entrances,</p>
        <p>And one man in his time plays many parts,</p>
        <p>His acts being seven ages. At first, the infant,</p>
        <p>Mewling and puking in the nurse's arms.</p>
        <p>Then the whining schoolboy, with his satchel</p>
        <p>And shining morning face, creeping like snail</p>
        <p>Unwillingly to school. And then the lover,</p>
        <p>Sighing like furnace, with a woeful ballad</p>
        <p>Made to his mistress' eyebrow. Then a soldier,</p>
        <p>Full of strange oaths and bearded like the pard,</p>
        <p>Jealous in honor, sudden and quick in quarrel,</p>
        <p>Seeking the bubble reputation</p>
        <p>Even in the cannon's mouth. And then the justice,</p>
        <p>In fair round belly with good capon lined,</p>
        <p>With eyes severe and beard of formal cut,</p>
        <p>Full of wise saws and modern instances;</p>
        <p>And so he plays his part. The sixth age shifts</p>
        <p>Into the lean and slippered pantaloon,</p>
        <p>With spectacles on nose and pouch on side;</p>
        <p>His youthful hose, well saved, a world too wide</p>
        <p>For his shrunk shank, and his big manly voice,</p>
        <p>Turning again toward childish treble, pipes</p>
        <p>And whistles in his sound. Last scene of all,</p>
        <p>That ends this strange eventful history,</p>
        <p>Is second childishness and mere oblivion,</p>
        <p>Sans teeth, sans eyes, sans taste, sans everything.</p>
    
      </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your reply. Everything worked perfectly, but there was a large white colum down the right hand side of the screen because the bg image wasn't scaling itself. I managed to get it to resize itself perfectly without the fixed background. Are you saying that its not possible to combine the two?

    Thanks

    Kate

  • #4
    New Coder
    Join Date
    Feb 2008
    Posts
    55
    Thanks
    1
    Thanked 0 Times in 0 Posts
    everything impossible would be possible just frelling about your enquiry problem ^__^

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    No, you can't conveniently resize a background-image using CSS at present, so use an image editor for that. If you just wanted to center the existing image being set as the background, rather than have it over to one side, you could just add this to the CSS:

    Code:
    background-position: 50% 50%;
    But to have a normal (non-background) image in fixed position on the page would require a JavaScript solution.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •