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 ?
Add a comment
|
4 Answers
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>
1 Comment
Gerhard Dinhof
I just thought about the same solution... In addition, I created a small draft, showing the splited background as well as the parts which have to be repeated: img24.imageshack.us/my.php?image=stackoverflowcssbgresiz.png
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.
1 Comment
Bjorn
CSS does support it, browsers don't support the CSS 3 specifications that has the background-size rule.
CSS 3 has the background-size property which would let you do this, but it's not supported in most browsers.
Comments
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.
