Question

我无法集中我的背景。我是否将BG改成小尺寸以使其成为中心而不是。

她是我的CSS：

#container {    
    background-image: url(Photos/BG.png);
    background-repeat:no-repeat;
    background-position: center center;
    height: 1813px;
    width: 1024px;
}

它不会使背景居中 - 即使使用较小尺寸的照片，它也会一直显示在显示屏的左上方。谢谢大家！

Answer 1

要集中背景图像，您无需指定中心两次。它应该如下：

 #container {    
    background-image: url(Photos/BG.png);
    background-repeat:no-repeat;
    background-position: center;
    height: 1813px;
}

Answer 2

您的代码按预期工作，如果您删除宽度，您将看到完全以背景为中心的图像......

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #container {    
    background-image: url('http://supermario3dworld.nintendo.com/_ui/img/views/power-ups/char-dobble-mario.png');
    background-repeat: no-repeat;
    background-position: center; /* you dont need to specify the value two times */
    height: 1813px;

            background-color: aquamarine;
}
    </style>
</head>

<body>
    <div id="container">

    </div>
</body>
</html>

Answer 3

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

应该工作，你可以做的另一件事就是制作一个div并将img放入其中，然后使用-1 z-index并将div放在中心位置。

您也可以尝试添加

body {
  min-height: 100%;
}

因为容器可能不是完整的视口大小。

CSS背景位置不会居中

3 个答案: