背景封面最小尺寸和居中

Question

我正在尝试为元素添加背景，但图像非常大。因此，使用background：cover会使图像保持实际大小而不会使其居中。因此，图像看起来非常“放大”，因为它没有尽可能多地显示。

所以，这就是问题：如何让图像尽可能小，同时仍然覆盖整个元素。此外，我如何正确对中？

附上我有什么背景：封面给我，以及我想要的简单的Photoshop模型。我用红色勾勒出背景边框的位置。

背景：覆盖小宽度

宽度较小的Photoshop模型

背景：覆盖宽度

大尺寸的Photoshop模型

Answer 1

目前，＃home的背景位置声明设置为 0,0; ​​

这些数字代表背景图像的x轴（水平放置）和y轴（垂直放置）。我和检查员一起玩，并且能够更好地移动背景图像的位置。如果对你更有意义，你也可以尝试使用关键词

    background-position: top left;

或者也许：

    background-position: center center;

百分比也是一种选择：

    background-position: 25% 50%;

关键字和百分比也分别适用于x轴和y轴。

查看MDN文章以获取更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

最后要注意的是，您的背景图片确实是巨大 -7.1MB。如果你能把它的大小降到至少1MB（虽然低于500kb是理想的），我完全推荐。

Answer 2

我不确定这是否有帮助，因为我没有尝试过;但是，基本上有一个叫做的属性 background-size：大小可以是％ 所以如果你想让背景图像为你希望的50％（宽度和高度）或50％75％（宽度和高度）

请参阅documentation background-size，另见examples

希望这可以提供帮助 艾伦梅希奥 伦敦