背景圖像縮放

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