Javascript 背景图像缩放

我想在我正在重新整理的网站的各个部分添加背景图像

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

见下文

仅仅创建一个新的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") + ")");
    }
});

css

或

---

应该是您的解决方案。

您可以稍微调整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

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

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