How do I get an image to fill entire div in CSS?

Discussion in 'HTML & Website Design' started by Sovereign6, Sep 18, 2006.

  1. #1
    Hello

    Does anybody know how to get an image to fill the entire width and height of the div using CSS and without loosing image definition?

    Here is my example.
    http://www.travelbreak.info/design.html.

    Thanks for any help.
     
    Sovereign6, Sep 18, 2006 IP
  2. kingjacob

    kingjacob Peon

    Messages:
    905
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I dont know of a way you could stretch it without losing definition, the easiest thing to do would be to cut it in three one div be the left one be the right and one be a small slice of the middle. the left and right youd just set the dimensions to the size of the picture, the middle div youd set to the size you needed and just set the repeat on.
     
    kingjacob, Sep 18, 2006 IP
  3. Grump

    Grump Well-Known Member

    Messages:
    36
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    108
    #3
    kingjacob is right, you can't stretch an image without affecting the quality of the image. There are a couple different ways to slice an image to fill the space you want. One is with 2 slices, keeping one as long as you think anyone will ever need to fill their screen resolution. But with extra wide screens and dual or triple monitor setups, you might be better off with a 3 slice image.

    Here is just one solution. Check the source code for details. http://www.enterprisejm.com/mindmapre/mindmapre_test.html

    Jim
     
    Grump, Sep 18, 2006 IP