Shrink image using javascript

Question

Hi everyone,

I need to shrink the image that was kept in div background-image using javascript.for that image four's side having rounded corner.

Is it possible in javascript?

any suggestions ?

Thanks & Regards

Ravi Kumar

Answer 1

CSS does not support the resizing of a background image.

If you're just looking for rounded corners, there are a wide variety of solutions available that use various combinations of HTML, CSS and Javascript.

Google: Rounded Corners

Answer 2

You can't resize backgrounds with JS.

You can split the image up into 4 corner images and nest divs to show them all:

<div style="background:url(tl.jpg) top left no-repeat">
    <div style="background:url(tr.jpg) top right no-repeat">
        <div style="background:url(bl.jpg) bottom left no-repeat">
            <div style="background:url(br.jpg) bottom right no-repeat">
                content
            </div>
        </div>
    </div>
</div>

Of course you can simplify that if you div only grows on one axis:

<div style="background:url(top.jpg) top no-repeat">
    <div style="background:url(bottom.jpg) bottom no-repeat">
        content
    </div>
</div>

Answer 3

CSS 3 has the background-size property which would let you do this, but it's not supported in most browsers.

Answer 4

Most modern browsers will let you round the corners of an element without resorting to background images. Check out the following CSS styles...

-moz-border-radius:4px; 
border-radius:4px; 
-webkit-border-radius:4px;

Each of these will give you a 4pixel radius. The first in Mozilla browsers (eg Firefox), the second is newer css3 browsers and the last in Safari et al.