#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    4
    Rep Power
    0

    How to make image visible according to height of div


    Hello everyone,

    I have an image which is 500X500px size.. Now i have set the image as background of body.. I have some content in my div tag..

    My question is how do i make only that much part of the background image of body visible which is according to the size of content in div.. I dont make to visible the whole image of body background as i dont want to have vertical scroll bar..

    Eg..body background size is 500X500 px and the content inside div is 200X500 px(h and W) , so i need to make only 200px of body image to be visible..

    Please help me.

    Regards,
    Krunal Panchal
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Why not set the image as the background of the div instead?

    Setting it as the background of the body it will always display the whole image depending on how big the screen size is on viewing.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    4
    Rep Power
    0
    Hi,

    But the height of div will set the image accordingly..and i want the image to be of its height and the div height will make that much part of the image..

    Please suggest.

    Regards,
    Krunal
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Unless I am missing something, your background image will only display as much of it as is required to fill the div based on how much content is in the div, that is why you add it to the div, not the body.

    Therefore if your div takes up 200 x 500 that is how much of your background image will display.

    Comments on this post

    • Kravvitz agrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    4
    Rep Power
    0
    Hi,

    I agree to you to put the image in div,but what I think is the image will set itself to height of div.. i mean if i keep the size of div to 200X500 px the image will set itself to 200X500px .. What should be done in this case.

    Please help me out.

    Krunal
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    It won't set itself to the size of the div unless you specify it to using background-size in your stylesheet. Why not try it and see what happens??

IMN logo majestic logo threadwatch logo seochat tools logo