中心背景图像和上面添加背景颜色

Question

我使用这篇文章Stretch并在后台缩放CSS图像 - 只用CSS来弄清楚如何拉伸我的背景图像以适应大小。 我正在使用背景尺寸：封面;

但我担心，这不是我需要的安静。 我无法弄清楚（一种不错的方式）如何做到：假设我的图像具有非常宽的分辨率，如3840px x 1024px

要求：

1. 图像居中
2. 视口宽度<1280px：固定宽度为1280px，水平可滚动视口宽度> = 1280px：无水平滚动，显示更多背景图像
3. 如果网站的内容真的很长（高于1024px）我想在图像上方添加一种颜色，如浅蓝色，如果图像的上半部分是天空，那么看起来bg颜色是图像的一部分。

当前的实现（很糟糕）：图像被切成3个偶数块。 中间部分是内容部分的背景。 如果屏幕宽度增加，将显示中间部分左右两个div，它们将图像的左侧和右侧部分作为背景）。 每次调整窗口大小时，都会使用js计算此边div的大小（高度和宽度）。 背景图像的偏移量在Chrome中有效，但在Firefox中左侧div存在问题。

这个代码是：

var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){

    var bodyWidth = $('body').width();
    var fillerSize = Math.floor((bodyWidth - PageWidth)/2);

    if(bodyWidth < PageWidth){
        $('#fillerLeft').hide();
        $('#fillerRight').hide();
    }
    else{
        var imageOffset = SideImageWidth - fillerSize;
        var mainHeight = $('#main').outerHeight();
        $('#fillerLeft').width(fillerSize).height(mainHeight).show();
        # Doesn't seem to work
        if($.browser.mozilla){
            $('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
        }
        $('#fillerRight').width(fillerSize).height(mainHeight).show();
    }
}

有一个很好的方法来做到这一点？ 没有js？

如果您不了解任何要求，请询问。

谢谢

编辑：我有一个（近乎工作）的方法：

#main{
    background-color: #d4eaff;
    background-image: url('forest-wide.jpg');
    background-repeat: no-repeat;
    background-size: auto 1280px;
    background-position: center top;
    min-width: 1280px;
}

如果内容不高于1024px，这很不错，但是当它超过1024px时，它会将蓝色添加到底部，所以我必须在此时将背景位置更改为中心底部。

Answer 1

好吧，如果你正在尝试的是获得完全拉伸的背景图像我想这会帮助你....纯粹基于CSS的工作在Safari 3 +，Chrome无论如何+，IE 9 +，Opera 10 +，Firefox 3.6+

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}