CSS背景位置不会居中
[英]CSS background-position will not center
问题描述
I am having trouble centering my background. 
我在集中背景方面遇到麻烦。 Whether I change the BG into small size to make it center it won't. 我是否将BG更改为小尺寸以使其居中，都不会。
Her is my CSS: 她是我的CSS：
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center center;
height: 1813px;
width: 1024px;
}
It doesn't center the background - it keeps going to the top left of the monitor even though using a smaller size photo. 它不会使背景居中-即使使用较小尺寸的照片，它也会一直移到显示器的左上方。 Thank you all! 谢谢你们！
3 个解决方案
解决方案1
0 2016-11-08 17:29:10
To centralise the background image you don't need to specify center center twice. 要集中背景图像，您无需两次指定中心。 It should be as follows: 应该如下：
#container {
background-image: url(Photos/BG.png);
background-repeat:no-repeat;
background-position: center;
height: 1813px;
}
解决方案2
0 2016-11-08 17:30:42
Your code works as aspected, if you remove the width you will see exactly the image centered in the background... 您的代码按方面进行工作，如果删除宽度，您将看到图像恰好位于背景的中心...
<!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>
解决方案3
-1 2016-11-08 17:24:21
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
should work, one other thing you could do is make a div and put the img in it, then use -1 z-index and just center the div. 应该可以正常工作，您可以做的另一件事是制作一个div并将img放入其中，然后使用-1 z-index并将div居中。
You could also try adding 您也可以尝试添加
body {
min-height: 100%;
}
because the container might not be the full viewport size. 因为该容器可能不是完整的视口大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.