用CSS设置背景图像的大小？
是否有可能设置CSS的背景图像的大小？
我想做一些事情：
background: url('bg.gif') top repeat-y; background-size: 490px; 但是这样做似乎是完全错误的…
CSS2
如果您需要使图像更大，则必须在图像编辑器中编辑图像本身。
如果你使用img标签，你可以改变大小，但是如果你需要图像作为其他内容的背景，它不会给你想要的结果（并且它不会像你想要的那样重复）。
CSS3 释放权力
这是可以做到CSS3与background-size 。
所有的现代浏览器都支持这一点，所以除非你需要支持旧浏览器，否则就是这样做的。
支持的浏览器：
Mozilla Firefox 4.0+（Gecko 2.0+），Microsoft Internet Explorer 9.0+，Opera 10.0+，Safari 4.1+（webkit 532）和Chrome 3.0+。
.stretch{ /* Will stretch to specified width/height */ background-size: 200px 150px; } .stretch-content{ /* Will stretch to width/height of element */ background-size: 100% 100%; } .resize-width{ /* width: 150px, height: auto to retain aspect ratio */ background-size: 150px Auto; } .resize-height{ /* height: 150px, width: auto to retain aspect ratio */ background-size: Auto 150px; } .resize-fill-and-clip{ /* Resize to fill and retain aspect ratio. Will cause clipping if aspect ratio of box is different from image. */ background-size: cover; } .resize-best-fit{ /* Resize to best fit and retain aspect ratio. Will cause gap if aspect ratio of box is different from image. */ background-size: contain; }
特别是，我喜欢这个cover并且contain了赋予我们以前没有的新控制权的价值观。
回合
你也可以使用background-size: round和repeat有联系的意思：
.resize-best-fit-in-repeat{ /* Resize to best fit in a whole number of times in x-direction */ background-size: round auto; /* Height: auto is to keep aspect ratio */ background-repeat: repeat; }
这将调整图像宽度，使其适合背景定位区域的整个次数。
附加说明
如果您需要的大小是静态像素大小，则调整实际图像的大小仍然很明智。 这是为了提高resize的质量（假设您的图像软件比浏览器做得更好），并且在原始图像大于显示内容的情况下节省带宽。
只有CSS 3支持，
background-size: 200px 50px;
但我会编辑图像本身，以便用户需要加载较less，它可能看起来比没有抗锯齿缩小的图像更好。
如果您的用户只使用Opera 9.5+，Safari 3+，Internet Explorer 9+和Firefox 3.6+，那么答案是肯定的。 否则，不。
background-size属性是CSS 3的一部分，但不适用于大多数浏览器。
为了您的目的，只是使实际图像更大。
不可能 。 背景总是尽可能大，但是可以阻止background-repeat 。
background-repeat: no-repeat;
其次，背景不会进入框的边缘区域，所以如果你想让背景只在框的实际内容上，你可以使用margin而不是padding。
第三，你可以控制背景图像的起始位置。 默认情况下它是框的左上angular，但是你可以用background-position来控制它，就像这样：
background-position: center top;
也许
background-position: 20px -14px;
负面的定位与CSS精灵使用很多。
不要太难，如果你不想深入一点:)
有一个被遗忘的论点：
background-size: contain;
这不会background-image cover那样延伸你的background-image 。 它会延伸，直到长边达到外部容器的宽度或高度，因此保留图像。
编辑：还有-webkit-background-size和-moz-background-size 。
IE9 +，Firefox 4 +，Opera，Chrome和Safari 5+支持background-size属性。
– 来源：W3学校
你完全可以用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％，然后将相应地重新调整背景大小，因为正文元素重新resize以适应较小的分辨率。
这里是例子： http : //www.sccc.premiumdw.com/examples/resize-background-images-with-css/
只要有嵌套的div是跨浏览器兼容的
<div> <div style="background: url('bg.gif') top repeat-y;min-width:490px;"> Put content here </div> </div><div> <div style="background: url('bg.gif') top repeat-y;min-width:490px;"> Put content here </div> </div>
background-size：200px 50px将其更改为100％100％，它将根据内容标签的需求进行缩放，例如ul li或div …尝试过
为了支持@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）
您可以使用两个<div>元素：
-
一个是一个容器（这是你最初想要的背景图片出现在的那个容器）。
-
第二个包含在内。 您将其大小设置为背景图像的大小（或您希望显示的大小）。
包含的div被设置为absolute定位。 这样它就不会干扰包含div中的项目的正常stream动。
它使您能够有效地使用精灵图像。
您无法使用当前版本的CSS（2.1）设置背景图片的大小。
您只能设置： position ， fix ， image-url ， repeat-mode和color 。
put the below code in the body of you css file background-image: URL('..http://img.dovov.comwave-green-plain-colour.jpg') ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100px;
你写了
background: url('bg.gif') top repeat-y; background-size: 490px;
但是只能根据容器的大小看到背景。
如果你有一个空的容器与背景的URL和任何背景大小，你不会看到bg.gif。
如果您将continer的大小设置为
background: url('bg.gif') top repeat-y; background-size: 490px; height: 490px; width: 490px;
结合你上面写的代码，你将能够看到bg.gif文件。
如果你想在相同的background属性中设置background-size ，你可以使用use：
background:url(my-bg.png) no-repeat top center / 50px 50px;
background-size在Chrome 4.1中工作，但到目前为止，我无法使其在Firefox 3.6中工作。
我使用button的背景图像，但它只显示与文本大小相同的图像，即使我设置宽度和高度。 相反，我使用 字符（不间断空格）。 基本上，我需要打耳光，直到出现所有的button背景。 所以我可能有这样的代码：
在样式表中：
#v2menu-home { background-image:url(../v2-siteimages/button.png); background-repeat:no-repeat; }
在HTML文件中：
<div id="v2menu"> <a id="v2menu-home" href="/index.php">home </a> </div><!-- v2menu -->
例如：
背景图片将始终适合容器尺寸（宽度100％，高度100px）。
跨浏览器的CSS：
.app-header { background: url("themes/defaulthttp://img.dovov.combackground.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/defaulthttp://img.dovov.combackground.jpg", sizingMethod = 'scale'); background-size: 100% 100px;
}
这是可以做到CSS3与背景大小
.backgroungImage { background: url('../imageS/background.jpg') no-repeat; background-size: 32px 32px; }
