使用CSS居中背景图像

我想居中背景图像。有没有使用DIV，这是CSS风格：使用CSS居中背景图像

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

以上CSS瓷砖一切都结束了呢中心，但一半的图像是没有看到，它只是一种向上移动。我想要做的是以图像为中心。我能采用图片查看即使是21" 屏幕上？

来源

2010-04-15 X10nD

现在，这将取决于图像的大小和浏览器的大小，不是吗？ – 2010-04-15 07:26:40

@nikc +1，我知道，但需要知道是否有工作 – X10nD 2010-04-15 07:31:04

213

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

这应该工作。

如果不是，为什么不把与图像和使用divz-index为背景吗？这会比背景图像更容易居中。

除了那个尝试：

background-position: 0 100px;/*use a pixel value that will center it*/或者我认为你可以使用50％，如果你已经将你的身体min-height设置为100％。

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

来源

2010-04-15 07:27:37 Kyle

它集中了，但只显示了一半的屏幕，我希望stackoverflow有一个选项附加屏幕截图 – X10nD 2010-04-15 07:32:22

你可以做一个截图并上传到你的服务器或免费像photobucket.com这样的图片托管网站，或者在www.jsfiddle.net上做一个临时示例，并为我们发布链接。从你所说的话，图像是1600x1200和大多数屏幕分辨率不会那么高，尝试调整您的图像适合的大小。例如，我使用1440x900的宽屏显示器。 – Kyle 2010-04-15 07:34:51

屏幕截图 - http://imagevat.com/picview。php？ig = 6179 我不知道如何将图像上传到jsfiddle，如果你可以帮我在那里 http://www.jsfiddle.net/yWrQP/ – X10nD 2010-04-15 07:52:02

尝试

background-position: center center;

来源

2010-04-15 07:04:16

双中心中心如何工作？无论如何它不能解决问题，仍然相同 – X10nD 2010-04-15 07:14:13

@Jean：看看规格，背景位置实际上可以实际取2个值（水平和垂直）。 http://www.w3.org/TR/CSS2/colors.html#propdef-background-position – 2010-04-15 07:18:57

@rob它不工作，图像平铺。图像是1600x1200，我的屏幕尺寸是1280x800 – X10nD 2010-04-15 07:21:29

您的代码出现错误。您在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。

来源

2010-04-15 07:42:10

'background：url（../ images/images2.jpg）center center no-repeat;'不起作用，因为语法错误而其他人也不工作 – X10nD 2010-04-15 07:58:26

我用这个代码，它的工作原理很好

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

来源

2012-12-18 17:49:48

谢谢！我甚至都不知道webkit有不同的声明，等等...... – 2014-02-28 09:24:18

嘿，维克多，我用过你的代码了很多，但现在看起来它不起作用。我添加了background-attachment：fixed;但它不适用于我的iPad浏览器... – Vadim 2015-11-22 19:09:37

试试这个background-position: center top;

这将这样的伎俩为您服务。

来源

2013-09-03 18:26:42 Magnus

我觉得this是什么都想：

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

来源

2014-02-12 06:10:21 Crab

background-attachment修复了我的问题;） – kdoteu 2016-02-02 19:34:26

是的，这也适用于我。 – Hexodus 2016-02-29 10:39:47

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

使用HTML 4.01的严格“的文档类型时，不垂直居中背景图像。

添加：

background-attachment: fixed;

应该解决的问题

（所以亚历山大是右）

来源

2014-09-29 14:34:16 Stephan

如果你不满意的答案上面，然后用这个

* {margin: 0;padding: 0;} 

    html 
    { 
     height: 100%; 
    } 

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

来源

2015-01-11 13:18:12

-2

的只有对我有用的东西是..

margin: 0 auto

来源

2015-08-12 12:15:53 plop

有同样的问题。使用的显示和保证金属性，它的工作。

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

来源

2016-07-22 21:11:25

只需更换

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

与

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

来源

2017-04-05 15:59:23 Praveen

使用CSS居中背景图像

回答

相关问题