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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Under the Influence
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Static Background Image with scrolling text??

    Hi there,
    I've noticed one or three sites lately using a method of displaying the page's background image in such a way so that it's static & remains so while the text on the page scrolls on top of it.

    It looks really quite good imho & I'd love to know how it's done but I can't find anything online with any nfo about it?.

    An example: www.linux-usb.org/SpeedTouch/mandrake , am I correct in saying it involves the use of stylesheets?.
    I am presuming so due to the reference to 3 css files in the source: style.css, style-small.css & style-print.css. There is also a 'IE6hack.css' in the code.

    Thanx & Regards, Esskie.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    background:#FFF url(yourimage.jpg) center no-repeat fixed;
    }
    </style>
    That goes in between your head tags, change yourimage.jpg to match your own image location.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Specifically, the fixed background is a result of the CSS background-attachment property. For reference, see W3Schools' CSS Background Properties list.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Under the Influence
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hi There,
    Thanx for that, I really appreciate you guys taking the time to reply & help me out so quickly! .

    I see the difference in the code now from your post _Aerospace_Eng_ ,

    http://www.w3schools.com/css/pr_back...attachment.asp shows the following for a scrolling bg:

    body
    {
    background-image: url(stars.gif);
    background-attachment: scroll
    }

    (thanx for the url Arbitrator)
    ...compared to:

    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    border:0;
    height:100%;
    background:#FFF url(yourimage.jpg) center no-repeat fixed;
    }
    </style>

    ...which is what I'm after .

    So using the code you posted _Aerospace_Eng_, is it a case of using the <IMG SRC="pics/mypic.jpg" or do I just place 'pics/mypic.jpg' between the brackets ie;

    ' background:#FFF url(pics/mypic.jpg') center no-repeat fixed; ' ?.

    Sorry for being so dumb btw but I usually make get the htm/html file/page together in a WYSIWYG first then try to do as much as I can in notepad after that. Afraid I still need the wysiwyg editor there to get up & running tho .

    Best Regards, Esskie.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Use background: #fff url(pics/mypic.jpg) center no-repeat fixed;

    It's the same as (the compacted form of):

    background-color: #fff;
    background-image: url(pics/mypics.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Apr 2006
    Location
    Under the Influence
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi there,
    Excellent! , thanx again. You've no idea how long I've been trying to suss that piece of code out!!. Guess I just caved in at the end & asked someone , not that a friend's help isn't appreciated of course but learning by doing etc ya know?,

    Best Regards, Esskie.


  •  

    Posting Permissions

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