背景图像缩放

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