How to make image visible according to height of div

Question

0.00/5 (No votes)

See more:

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

Posted 9-Sep-13 19:49pm

krunalpanchalN

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-09-09T20:07:00

This approach would not be simple and would not be productive. If you change your window a little bit, you would need your image width of 201, then 203, 205… Why?

The typical HTML approach is the opposite: you change the size of div according to the size of the image, automatically. Don't you think it would be much better? Perhaps you need to review your design and learn liquid, fluid and elastic design. Please see my past answer and the links: To Get Screen resolution[^].

[EDIT]

After OP's clarification in the comments below:

I just tried it: you can use CSS clip property: http://www.w3schools.com/cssref/pr_pos_clip.asp[^].

The practical use of it could be somewhat complicated: if you want to change the size dynamically, you have to write JavaScript modifying clip parameters depending on the current size of the parent div element. The best way of such manipulations would be using jQuery. Please see: http://api.jquery.com/category/css/[^].

—SA