CSS - Like Twitter

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

  1. tech

    tech Regular Member

    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

    Just add;

    background-attachment: fixed;

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

    Michael Regular Member

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

    FullMetalBabe Zealot

    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

    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

    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

    =\ 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

    define logo
     
  9. ArnyVee

    ArnyVee Regular Member

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

    Yoshi Regular Member

    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

    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

    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

    Blah, I know I'm wrong, dunno.
     

Share This Page