September 10th, 2013, 12:40 AM
How to make image visible according to height of div
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.
September 10th, 2013, 01:15 AM
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.
September 10th, 2013, 01:24 AM
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..
September 10th, 2013, 01:34 AM
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
September 10th, 2013, 02:08 AM
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.
September 10th, 2013, 02:12 AM
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??