用CSS设置背景图像的大小?

是否可以用CSS设置背景图像的大小?

我想做的事情是:

background: url('bg.gif') top repeat-y;
background-size: 490px;

但这样做似乎是完全错误的……

当前回答

如果你想在相同的background属性中设置background-size，你可以使用use:

background:url(my-bg.png) no-repeat top center / 50px 50px;

2016-02-23 23:18:43

其他回答

你完全可以用CSS3:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

这将把背景图像的大小调整为主体元素宽度的100%，然后根据较小的分辨率调整主体元素的大小，相应地调整背景的大小。

示例如下:http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

2012-07-25 04:52:13

例如: 背景图像将始终适合容器大小(宽度100%，高度100px)。跨浏览器的CSS:

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

2013-03-28 20:10:09

为了支持@tetra给出的答案，我想指出，如果图像是SVG，那么调整实际图像的大小是不必要的。

由于SVG文件只是XML，您可以指定希望它在XML中显示的大小。

但是，如果您在不同的地方使用相同的SVG图像，并且需要使用不同的大小，那么使用background-size非常有用。SVG文件本来就比栅格图像小，用CSS调整大小非常有用，而且我知道不会有任何性能损失，当然质量也几乎没有损失。

这里有一个简单的例子:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(注:这适用于我在OS X 10.7与Firefox 8, Safari 5.1和Chrome 16.0.912.63)

2012-01-10 20:19:09

背景尺寸:200px 50px 将其改为100% 100%，它将根据内容标签的需要缩放，如ul li或div…试过

2012-01-03 13:08:48

不要太难，如果你不怕更深入一点的话:)

有一个被遗忘的论点: