居中背景图像并在上方添加背景颜色

Question

我使用这篇帖子Stretch and scale a CSS image in the background - with CSS only 来弄清楚如何拉伸我的背景图像以适应大小。我正在使用背景尺寸：封面；

但恐怕，这不是我需要的安静。我不知道（一个好方法）如何做到这一点： 假设我有一个分辨率非常宽的图像，例如 3840px x 1024px

要求：

1. 图像居中
2. 视口宽度= 1280px：无水平滚动，显示更多背景图片
3. 如果网站的内容真的很长（超过 1024 像素）我想在图像上方添加一种颜色，例如浅蓝色，如果图像的上部是天空，那么看起来 bg-color 是其中的一部分图片。

当前的实现（很糟糕）： 图像被切成 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;
}

如果内容不高于 1024 像素，这很好，但是当它超过 1024 像素时，它会将蓝色添加到底部，因此我必须将背景位置更改为底部居中。

Answer 1

好吧，兄弟，如果您要获得完全拉伸的背景图像，我想这会对您有所帮助....纯基于 CSS 的作品适用于 Safari 3+、Chrome 无论+、IE 9+、Opera 10+、 火狐 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;
}