使用CSS在背景图片上设置尺寸？

本文翻译自：Set size on background image with CSS?

Is it possible to set the size of the background image with CSS? 是否可以使用CSS设置背景图片的大小？

I want to do something like: 我想做类似的事情：

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

But it seems it's totally wrong to do it like that... 但是这样做似乎是完全错误的...

---

#1楼

参考：https://stackoom.com/question/5cwo/使用CSS在背景图片上设置尺寸

---

#2楼

You totally can with CSS3: 您完全可以使用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;
 }

This will size a background image to 100% of the width of the body element and will then re-size the background accordingly as the body element re-sizes for smaller resolutions. 这会将背景图像的大小调整为body元素宽度的100％，然后随着body元素的大小调整为较小的分辨率而相应地重新调整背景的大小。

Here is the example: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/ 这是示例： http : //www.sccc.premiumdw.com/examples/resize-background-images-with-css/

---

#3楼

Not possible . 不可能的 。 The background will always be as large as it can be, but you can stop it from repeating itself with background-repeat . 背景将始终尽可能地大，但是您可以使用background-repeat阻止它重复自身。

background-repeat: no-repeat;

Secondly, the background does not go into margin-area of a box, so if you want to have the background only be on the actual contents of a box, you can use margin instead of padding. 其次，背景不会进入框的空白区域，因此，如果您只想让背景位于框的实际内容上，则可以使用空白而不是填充。

Thirdly, you can control where the background image starts. 第三，您可以控制背景图像的起始位置。 By default it's the top left corner of a box, but you can control that with background-position , like this: 默认情况下，它是盒子的左上角，但是您可以使用background-position来控制它，如下所示：

background-position: center top;

or perhaps 也许

background-position: 20px -14px;

Negative positioning is used a lot with CSS sprites . 负定位在CSS精灵中经常使用。

---

#4楼

If your users use only Opera 9.5+, Safari 3+, Internet Explorer 9+ and Firefox 3.6+ then the answer is yes. 如果您的用户仅使用Opera 9.5 +，Safari 3 +，Internet Explorer 9+和Firefox 3.6+，那么答案是肯定的。 Otherwise, no. 否则，不会。

The background-size property is part of CSS 3, but it won't work on most browsers. background-size属性是CSS 3的一部分，但不适用于大多数浏览器。

For your purposes just make the actual image larger. 为了您的目的，请放大实际图像。

---

#5楼

You can't set the size of your background image with the current version of CSS (2.1). 您无法使用当前版本的CSS（2.1）设置背景图片的大小。

You can only set: position , fix , image-url , repeat-mode , and color . 您只能设置： position ， fix ， image-url ， repeat-mode和color 。

---

#6楼

CSS2 CSS2

If you need to make the image bigger, you must edit the image itself in an image editor. 如果需要放大图像，则必须在图像编辑器中编辑图像本身。

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)... 如果使用img标签，则可以更改大小，但是如果您需要将图像作为其他内容的背景，那将无法达到预期的效果（并且它不会像您想要的那样重复出现）...

CSS3 _{^{unleash the powers}} CSS3 _{^释放力量}

This is possible to do in CSS3 with background-size . 在CSS3中使用background-size可以做到这一点。

All modern browsers support this, so unless you need to support old browsers, this is the way to do it. 所有现代的浏览器都支持此功能，因此除非您需要支持旧的浏览器，否则这是这样做的方法。
_{Supported browsers: 支持的浏览器：}
^{Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+. 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;
}

In particular, I like the cover and contain values that gives us new power of control that we didn't have before. 特别是，我喜欢cover并contain赋予我们前所未有的新控制能力的值。

Round 回合

You can also use background-size: round that have a meaning in combination with repeat: 您还可以使用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;
}

This will adjust the image width so it fits a whole number of times in the background positioning area. 这将调整图像宽度，使其适合背景定位区域中的所有次数。

---

Additional note 附加说明
If the size you need is static pixel size, it is still smart to physically resize the actual image. 如果您需要的尺寸是静态像素尺寸，则可以通过物理方式调整实际图像的尺寸。 This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display. 这既可以提高调整大小的质量（假设您的图像软件比浏览器做得更好），又可以在原始图像大于要显示的图像时节省带宽。