CSS - Like Twitter

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

  1. tech

    tech Regular Member

    490
    11
    164
    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

    219
    11
    164
    Just add;

    background-attachment: fixed;

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

    Michael Regular Member

    166
    35
    104
    It has to be one of the most simple pieces of CSS with such great results :D
     
  4. FullMetalBabe

    FullMetalBabe Zealot

    2,912
    339
    502
    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

    490
    11
    164
    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

    390
    14
    104
    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

    2,912
    339
    502
    =\ 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

    390
    14
    104
    define logo
     
  9. ArnyVee

    ArnyVee Regular Member

    1,264
    39
    404
    How do you make it so that you can "tile" the image and keep it "fixed" as well?
     
  10. Yoshi

    Yoshi Regular Member

    219
    11
    164
    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;
     
    2 people like this.
  11. FullMetalBabe

    FullMetalBabe Zealot

    2,912
    339
    502
    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;
     
    2 people like this.
  12. WI

    WI Regular Member

    1
    0
    33
    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

    2,912
    339
    502
    Blah, I know I'm wrong, dunno.
     

Share This Page