SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: BG image - how?

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    UK
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BG image - how?

    Can anyone tell me how the alistapart site does this with their background image (big fading image) so that it stays in a fixed position at the bottom of the screen.

    http://www.alistapart.com

    At first I thought it might be just a really big image that looks OK on 1024x768, but it looks the same on all resolutions.

    Matt

  2. #2
    SitePoint Zealot romance's Avatar
    Join Date
    Apr 2004
    Location
    UK
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiste way of finding out how a design is done in css as well as learning is looking at the code yourself, but as i'm feeling generous i've grabbed the source for you:
    Code:
    body	{
    	border-left:0px none; border-right:0px none; border-bottom:0px none; background:#9aa url('/d/i/btgrdk.gif') repeat-x fixed bottom left; color: #333;
    	margin: 0;
    	border-top: 5px solid #566;
    	text-align: center;
    	font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
    	padding-bottom: 25px; padding-left:0; padding-right:0; padding-top:0
    	}

  3. #3
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you wanted to do the same you would mearly find a nice gradient that you are looking for, and cut a 1px gif / png whatever you like as you background then use the following CSS

    body {
    background: #CCCCCC url(images/yourbg.gif) repeat-x fixed bottom;
    }


    obviously you will be able to add any other styles you want to the body tag, basically what the above tag means is.

    Take the background color "#CCCCCC" (or whatever you want yours to be) I would make it the lighter of the gradien color

    Then you take the image that you cut and tell the CSS to add that in "url(images/yourbg.gif)" then you tell the CSS to repeat that image across ONLY"repeat-x" you then tell it to stay where it is and not mive when a users scrolls "fixed" and finally you tell the CSS to align the background to the bottom of the page "bottom"

    Hope this helps explain a little

    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    UK
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool...

    Thanks for both ur help... I understand how it's done now.... cheers

    Matt


Bookmarks

Posting Permissions

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