how can i have stretched background

Discussion in 'CSS' started by arpit13, Feb 17, 2010.

  1. #1
    hello everyone,

    i tried this coding:
    body { background: url(bg.jpg); }
    and the background image comes in tile format and it does not seeming good.
    i want stretched image background.
    please help me.
     
    arpit13, Feb 17, 2010 IP
  2. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can't really have a stretched background without using some form of javascript. Plus, I don't recommend it as it'll look ugly.

    You can however, use any of these (you are using the shorthand property and have only declared an image, in that case you should have used background-image:url(bg.jpg);, but the following is a better way to do it.):

    body { background:#fff url(bg.jpg) no-repeat 0 0; } - this will display the image once in the left top (0 0)

    body { background:#fff url(bg.jpg) repeat-x 0 0; } - this will display the image in the left top and repeat horizontally.

    body { background:#fff url(bg.jpg) repeat-y 0 0; } - this will display the image left top and repeat vertically.

    or, to continue the way you were doing it:

    body {
    background-color:#fff;
    background-image:url(bg.jpg);
    background-repeat:no-repeat;
    background-position:0 0;}
    }

    Hope this helps a bit. The default for background images is to just repeat.
     
    pmek, Feb 17, 2010 IP
  3. arpit13

    arpit13 Well-Known Member

    Messages:
    294
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    128
    Digital Goods:
    1
    #3
    thanks alot.
    i still can't have stretched but you are right it will look ugly.
    i don't know much css but this helped me
     
    arpit13, Feb 17, 2010 IP
  4. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    One way to do it more effectively, is to have a large background image centred, that fades out to a solid colour at the sides.

    Here is a tutorial that shows you what I mean - http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

    You'll want to make sure your image isn't too big though.

    If you really want a stretched background. Have a look at this - http://www.cssplay.co.uk/layouts/background.html

    Carefully consider what route to take though. I think stretched backgrounds only work in certain cases.
     
    pmek, Feb 18, 2010 IP
  5. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0