使用 CSS 将背景图像居中

Centering a background image, using CSS

提问by X10nD

I want to center a background image. There is no div used, this is the CSSstyle:

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

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

The above CSS tiles all over and does center it, but half the image is not seen, it just kind of moves up. What I want to do is center the image. Could I adopt the image to view even on a 21" screen?

上面的 CSS 瓷砖遍布并使其居中，但没有看到一半的图像，它只是向上移动。我想做的是使图像居中。即使在 21 英寸屏幕上，我也可以采用该图像进行查看吗？

回答by Kyle

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

That should work.

那应该工作。

If not, why not make a divwith the image and use z-indexto make it the background? This would be much easier to center than a background image on the body.

如果没有，为什么不div使用图像制作一个并将其用作z-index背景？这比身体上的背景图像更容易居中。

Other than that try:

除此之外尝试：

background-position: 0 100px;/*use a pixel value that will center it*/Or I think you can use 50% if you have set your body min-heightto 100%.

background-position: 0 100px;/*use a pixel value that will center it*/或者我认为如果您将身体设置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%;
}

回答by victor Martinez

I use this code, it works nice

我使用此代码，效果很好

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;
}

回答by Crab

I think thisis what is wanted:

我认为这是想要的：

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

回答by Pekka

Try

尝试

background-position: center center;

回答by Ronnie Royston

Like this:

像这样：

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;
}

回答by Rob van Groenewoud

There's an error in your code. You're using a mix of full syntax and shorthand notation on the background-image property.This is causing the no-repeat to be ignored, since it's not a valid value for the background-image property.

您的代码中有错误。您在 background-image 属性上混合使用了完整语法和速记符号。这会导致 no-repeat 被忽略，因为它不是 background-image 属性的有效值。

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

Should become one of the following:

应成为以下之一：

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

or

或者

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

EDIT: For your image 'scaling' issue, you might want to look at this question's answer.

编辑：对于您的图像“缩放”问题，您可能需要查看此问题的答案。

回答by Stephan

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

Does not vertically center the background image when using a html 4.01 'STRICT' doctype.

使用 html 4.01 'STRICT' doctype 时不垂直居中背景图像。

Adding:

添加：

background-attachment: fixed;

Should fix the problem

应该解决问题

(So Alexander is right)

（所以亚历山大是对的）

回答by Magnus

Try this background-position: center top;

尝试这个 background-position: center top;

This will do the trick for you.

这将为您解决问题。

回答by Praveen

simply replace

简单地替换

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

with

和

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

回答by Robert Paul

Had the same problem. Used display and margin properties and it worked.

有同样的问题。使用了显示和边距属性，它起作用了。

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}