背景图像缩放

Question

我想将背景图像添加到我正在换肤的网站的各个部分中。

问题是背景图像被放大了。

见下文。

刚创建一个新的CSS div会更好，更快。请问有人可以提供语法建议吗？

// Sections backgrounds

var pageSection = $(".home-section, .page-section, .small-section, .split-section");
pageSection.each(function(indx){

    if ($(this).attr("data-background")){
        $(this).css("background-image", "url(" + $(this).data("background") + ")");
    }
});

Answer 1

的CSS

background-size: cover

要么

background-size: 100%

应该是您的解决方案。

Answer 2

您可以稍微调整一下JavaScript来对部分进行分类。

var pageSection = $(".home-section, .page-section, .small-section, .split-section");
pageSection.each(function(){
    if ($(this).attr("data-background")){
        $(this).css("background-image", "url(" + $(this).data("background") + ")");
        $(this).addClass('full-background'); //adds the class
    }
});

然后使用CSS正确设置样式

.full-background {
    background-size: cover;
 }

但是，这是CSS3样式，因此请注意IE8