使用CSS将背景图像居中

148

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

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

上面的CSS会全部平铺并将其居中，但是看不到一半的图像，只是向上移动了一点。我想做的就是将图像居中。我可以在21英寸的屏幕上观看图像吗？

css

— X10nD
source

1

现在，这取决于图像的大小和浏览器的大小，不是吗？

— nikc.org 2010年

我知道@nikc +1，但需要知道是否有解决方法

— X10nD 2010年

304

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

— 凯尔
source

它确实集中在屏幕上，但只显示一半的屏幕，我希望stackoverflow可以选择附加屏幕截图

— X10nD 2010年

您可以制作一个屏幕截图并将其上传到您的服务器或免费的图片托管网站，例如photobucket.com，或者在www.jsfiddle.net上创建一个临时示例并为我们发布链接。从您所说的来看，图像的分辨率为1600x1200，并且大多数屏幕分辨率都不那么高，请尝试调整图像的大小以适合屏幕尺寸。例如，我使用1440x900的宽屏显示器。

— 凯尔（Kyle）2010年

屏幕快照-imagevat.com/picview.php?ig=6179我不确定如何将图像上传到jsfiddle，如果您可以帮助我的话jsfiddle.net/yWrQP

— X10nD 2010年

要将图像添加到jsfiddle，只需使用完整的http路径EX：background-image:url(http://www.myurl.com/images/image.jpg);将其放入CSS中即可。

— 凯尔（Kyle）2010年

我没有服务器可以执行此操作，但是使用了图像托管站点，但是现在仍然可以将其检出

— X10nD 2010年

20

我使用此代码，它很好用

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

— 胜利者马丁内斯
source

谢谢！我什至不知道webkit等有不同的声明……

— Mike Rapadas 2014年

嗨，维克多，我经常使用您的代码，但现在看来它不起作用了。我添加了背景附件：固定；但无法在我的iPad浏览器上使用...

— Vadim

只有-webkit-background-size从特别声明，虽然存在。

— BigBang1112

16

我认为这是想要的：

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

— 螃蟹
source

6

背景附件为我解决了问题；）

— kdoteu '16

7

尝试

background-position: center center;

— 佩卡
source

双中心中心如何运作？无论如何，它仍然不能解决问题，还是一样

— X10nD'4

1

@Jean：看一下规格，背景位置实际上可以取2个值（水平和垂直）。w3.org/TR/CSS2/colors.html#propdef-background-position

— Rob van Groenewoud 2010年

@rob无法正常工作，图像正在平铺。图片为1600x1200，我的屏幕尺寸为1280x800

— X10nD'4

2

@Jean您尚无法调整背景图片的大小。在CSS 3中是可能的，但是还没有得到足够广泛的支持。center center与之配合background-repeat: no-repeat应执行的操作-使图像居中。

— Pekka '04

2

@Jean ahh，我现在从您的屏幕截图中看到。您需要提供body一个min-height，100%因此它会扩展到整个屏幕。那可能会排序。

— Pekka 2010年

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;

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

展开摘要

— 罗尼·罗斯顿
source

3

您的代码中有错误。您在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;
}

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

— 罗布·范·格罗纽瓦德
source

'background：url（../ images / images2.jpg）中心不重复；' 不起作用，因为语法错误，而其他语法也不起作用

— X10nD

2

试试这个 background-position: center top;

这将为您解决问题。

— 马格努斯
source

2

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

使用html 4.01'STRICT'文档类型时，不会使背景图像垂直居中。

新增：

background-attachment: fixed;

应该解决问题

（所以亚历山大是对的）

— 史蒂芬
source

1

只需更换

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

与

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

— 普拉文
source

0

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

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

— Toye_Brainz
source

0

有同样的问题。使用了显示和边距属性，并且可以正常工作。

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

— 罗伯特·保罗
source

0

background-position: center center;

没有...对我不起作用

background-attachment: fixed;

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

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

— 格林本
source

-2

唯一对我有用的是..

margin: 0 auto

— 扑通
source