Question

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

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

上面的CSS平铺并且确实居中，但是没有看到一半的图像，它只是向上移动。我想要做的是使图像居中。即使在21英寸的屏幕上我也可以采用图像进行查看吗？

Answer 1

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

这应该有效。

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

除此之外尝试：

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

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

Answer 3

我认为this是我们想要的：

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

Answer 4

尝试

background-position: center center;

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;

＆＃13;

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

＆＃13;

Answer 6

您的代码中存在错误。您在background-image属性上使用了完整语法和简写表示法的混合。这导致无重复被忽略，因为它不是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;
}

编辑：对于图片“缩放”问题，您可能需要查看this question's answer。

Answer 7

试试这个background-position: center top;

这将为你解决问题。

Answer 8

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

使用html 4.01＆＃39; STRICT＆＃39;时，不会使背景图像垂直居中。 DOCTYPE。

添加：

background-attachment: fixed;

应该解决问题

（所以亚历山大是对的）

Answer 9

如果您对上述答案不满意，请使用此

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Answer 10

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

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

Answer 11

简单地替换

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

与

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

Answer 12

background-position: center center;

没有...对我不起作用

background-attachment: fixed;

同时使用我的图片在x和y轴上居中

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

Answer 13

唯一对我有用的是......

margin: 0 auto

使用CSS将背景图像居中

13 个答案: