居中背景图片，使用CSS

Question

我想居中一个背景图像。在这里没有使用 div，这是 CSS 样式：

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

上面的CSS可以将图片平铺并居中，但是只有一半的图片可见，它似乎只是向上移动了。我想要做的是将图片居中。我是否可以调整图片以在21英寸屏幕上查看？

- X10nD

---

那就取决于图片的大小和浏览器的大小了，不是吗？ - nikc.org

@nikc +1，我知道，但需要知道是否有解决方法。 - X10nD

Answer 1

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

那应该可以行得通。

如果不行，为什么不使用带有图像的 div 并使用 z-index 将其作为背景呢？这比在 body 上使用背景图片更容易居中。

除此之外，尝试：

background-position: 0 100px;/*使用一个像素值使其居中*/ 或者如果你将 body 的 min-height 设置为 100%，我认为你可以使用 50%。

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

- Kyle

---

它确实进行了集中处理，但仅显示了屏幕的一半，我希望stackoverflow有一个选项可以附加截图。 - X10nD

你可以截屏并上传到你的服务器或像photobucket.com这样的免费图片托管网站，或者在www.jsfiddle.net上制作一个临时示例并为我们发布链接。根据你所说，该图像为1600x1200，大多数屏幕分辨率不会那么高，请尝试调整图像大小以适应。例如，我使用1440x900的宽屏显示器。 - Kyle

我不确定如何将图片上传到jsfiddle，如果你能帮我解决这个问题。截图- http://imagevat.com/picview.php?ig=6179 http://www.jsfiddle.net/yWrQP/ - X10nD

在Firefox中使其正常工作后，请检查跨浏览器兼容性，你设置了min-height吗？ - Kyle

你的jsfiddle没有任何作用，当你点击运行时，应该在右下角的框架中显示你的结果，请修改你的fiddle。这是我一直在折腾的一个例子http://jsfiddle.net/waFC8/。 - Kyle

Answer 2

我使用这段代码，它运行良好

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(back2.png) center center no-repeat;;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

- victor Martinez

---

谢谢！我甚至不知道有不同的声明方式适用于webkit等... - Mike Rapadas

嘿，维克多，我经常使用你的代码，但现在看起来好像不起作用了。我添加了background-attachment:fixed; 但它在我的iPad浏览器上不起作用... - Vadym

只有-webkit-background-size是特殊声明中存在的。 - BigBang1112

Answer 3

我认为这个就是所需的内容:

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
} 

- Crab

---

background-attachment fixed 对我来说解决了问题 ;) - kdoteu

Answer 4

尝试

background-position: center center;

- Pekka

---

双中心点是如何工作的？ 无论如何，它并没有解决问题，仍然是一样的。 - X10nD

@Jean：看一下规格，background-position 实际上可以同时接受两个值（水平和垂直）。http://www.w3.org/TR/CSS2/colors.html#propdef-background-position - Rob van Groenewoud

@rob，它不起作用了，图像正在平铺。该图像为1600x1200，而我的屏幕尺寸为1280x800。 - X10nD

@Jean，你目前还无法调整背景图片的大小。虽然在CSS 3中可以实现，但是目前还没有得到广泛支持。使用“center center”与“background-repeat: no-repeat”结合起来应该可以实现你所要求的效果——将图像居中显示。 - Pekka

@Jean 啊，我现在从你的截图中明白了。你需要给 body 设置一个 min-height 为 100%，这样它就可以延伸到整个屏幕。这可能会解决问题。 - Pekka

Answer 5

就像这样：

background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;

html{
height:100%
}

body{
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Dore_woodcut_Divine_Comedy_01.jpg/481px-Dore_woodcut_Divine_Comedy_01.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: cover;
}

- Ronnie Royston

Answer 6

你的代码中有一个错误。你在background-image属性上同时使用了完整语法和简写符号，这导致no-repeat被忽略，因为它不是background-image属性的有效值。

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

应该变成以下之一：

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

或者

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

编辑：关于您的图像“缩放”问题，您可能希望查看这个问题的答案。

- Rob van Groenewoud

---

'background:url(../images/images2.jpg) center center no-repeat;' 不起作用，因为语法错误。而其他的也不起作用。 - X10nD

Answer 7

background-position: center center;

没有……对我有效

background-attachment: fixed;

使用居中对齐方式，将我的图像在x轴和y轴上都居中显示。

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

- greenbeen

Answer 8

尝试使用 background-position: center top;，这将解决你的问题。

- Magnus

Answer 9

background-repeat:no-repeat;
background-position:center center;

在使用 html 4.01 'STRICT' doctype 时，无法垂直居中背景图片。

解决方法：

background-attachment: fixed;

应该解决了这个问题

(所以Alexander是正确的)

- Stephan

Answer 10

简单替换

background-image:url(../images/images2.jpg) no-repeat;

使用

background:url(../images/images2.jpg)  center;

- Praveen

---

这将重复显示该图像。在 Chrome 上，需要指定居中和不重复。 - Garr Godfrey