CSS - Like Twitter

Discussion in 'Web Development and Programming' started by tech, Oct 27, 2009.

  1. tech

    tech Regular Member

    Joined:
    Jun 13, 2009
    Messages:
    490
    Likes Received:
    11
    The backgrounds on twitter are ''stuck'' there and when you scroll down the content scrolls but the background doesnt, how do you do this in CSS?

    Thanks
     
  2. Yoshi

    Yoshi Regular Member

    Joined:
    Jun 9, 2005
    Messages:
    219
    Likes Received:
    11
    Location:
    UK
    Just add;

    background-attachment: fixed;

    to your background image bit in the CSS.
     
  3. Michael

    Michael Regular Member

    Joined:
    Jan 18, 2004
    Messages:
    166
    Likes Received:
    35
    It has to be one of the most simple pieces of CSS with such great results :D
     
  4. FullMetalBabe

    FullMetalBabe Zealot

    Joined:
    May 30, 2009
    Messages:
    2,912
    Likes Received:
    339
    Lol, it can be put in one line to make it more simple.



    background: url(image) top left fixed no-repeat;
     
  5. tech

    tech Regular Member

    Joined:
    Jun 13, 2009
    Messages:
    490
    Likes Received:
    11
    Thanks everyone, ganno try putting a game or picture on the background of JetGaming to make it even more gamier (if thats a word)...


    What would the recommended size be?
     
  6. tryfuhl

    tryfuhl Champion

    Joined:
    Jun 27, 2009
    Messages:
    391
    Likes Received:
    14
    First Name:
    Shawn
    check the analytics of your forum to see what resolutions most people are using

    I guess it really depends on the layout of your site though.. static or fixed, etc
     
  7. FullMetalBabe

    FullMetalBabe Zealot

    Joined:
    May 30, 2009
    Messages:
    2,912
    Likes Received:
    339
    =\ A logo shouldn't be bigger than 900px, it could be a bit too big, I try to keep mines at 600-700 px unless I intend to put many images.
     
  8. tryfuhl

    tryfuhl Champion

    Joined:
    Jun 27, 2009
    Messages:
    391
    Likes Received:
    14
    First Name:
    Shawn
    define logo
     
  9. ArnyVee

    ArnyVee Regular Member

    Joined:
    May 25, 2009
    Messages:
    1,264
    Likes Received:
    39
    How do you make it so that you can "tile" the image and keep it "fixed" as well?
     
  10. Yoshi

    Yoshi Regular Member

    Joined:
    Jun 9, 2005
    Messages:
    219
    Likes Received:
    11
    Location:
    UK
    Just add;

    background-repeat: repeat;

    So you have;

    background-attachment: fixed;
    background-repeat: repeat;

    Or if you have it in one line like FMB said, then;

    background: url(bgimage.gif) top left fixed repeat;
     
    1 person likes this.
  11. FullMetalBabe

    FullMetalBabe Zealot

    Joined:
    May 30, 2009
    Messages:
    2,912
    Likes Received:
    339
    I should add if you want it to repeat horizontally ONLY you could add:

    background: url(bgimage.gif) top left fixed repeat-x;

    Or vertically ONLY

    background: url(bgimage.gif) top left fixed repeat-y;
     
    1 person likes this.
  12. WI

    WI Regular Member

    Joined:
    Dec 11, 2009
    Messages:
    1
    Likes Received:
    0
    First Name:
    skj
    what about css code to autofit bg different screen size?? i heard css3 support stretching bg to fit screen but browsers not supported....
     
  13. FullMetalBabe

    FullMetalBabe Zealot

    Joined:
    May 30, 2009
    Messages:
    2,912
    Likes Received:
    339
    Blah, I know I'm wrong, dunno.
     

Share This Page