css - 锁定背景图像大小

Question

我试图弄清楚如何锁定 div 背景图像的大小。我希望能够在保持背景图像大小相同的同时放大页面大小，只改变裁剪因子。试图做类似的事情...... http://developers.kippt.com/

.div{
    background-image: url(../img/background-image.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 600px;
    display: block;
    position: relative;
}

Answer 1

我以前使用过这些技术，它们都很好用。如果您阅读了每种方法的优缺点，您可以决定哪种方法适合您的网站。

或者，如果您想摆脱上述错误，您可以使用全尺寸背景图像 jQuery 插件。

Answer 2

您可以使用

//this will scale the background image as large as possible to cover the whole div
background-size:cover;

//for fixed positioning
background-attachment:fixed;
//to make it center (or center top, depends on your need)
background-position:center center;

有关背景大小的更多信息，您可以在此处阅读文章