开发者

Changing the size of a background for a div using css

开发者 https://www.devze.com 2022-12-08 01:13 出处:网络
I have an image for a background for a div that doesn\'t exactly fit.Is there a way, using css, to change the size of the image (e.g. background-size:10%)?

I have an image for a background for a div that doesn't exactly fit. Is there a way, using css, to change the size of the image (e.g. background-size:10%)?

.header-tab { background: transparent url(/resources/images/light-green-gradient.png) repeat-开发者_运维知识库x scroll 0 0; }


background-size is a css3 value which can be set

see: http://www.w3.org/TR/css3-background/#the-background-size

or use this method http://css-tricks.com/how-to-resizeable-background-image/


background-size isn't implemented yet in any browser, but there is -*-background-size for the newest versions of Mozilla, Webkit, Konqueror and (buggy) Opera:

background-size: 10%;
-moz-background-size: 10%;
-o-background-size: 10% auto; /* Opera needs x AND y values, or no background! */
-webkit-background-size: 10%;
-khtml-background-size: 10%;

Don't use it in Opera together with background-attachment:fixed.

Mozilla Developer Center has more and a workaround for Firefox 3.5.

For older browsers, you can emulate it with an img like in Jimmy's second link, but then of course you'd have to figure out how to hide that image from new browsers.

0

精彩评论

暂无评论...
验证码 换一张
取 消