如何让超大背景幻灯片不覆盖整个屏幕？

Question

现有许多全屏背景拉伸脚本，我正在使用的是这个

我试图实现一种效果，即背景照片不覆盖整个屏幕，而是在屏幕左侧留下250px（为了固定边栏），并填充其余部分。重要的是要在右部分显示照片的完整宽度。

这是我正在工作的网站。正如您所看到的，背景因侧边栏而向右推移，但结果是背景的一部分被裁剪了。

http://princeseafoodrestaurant.com/dev/

任何帮助都将不胜感激！

- Willie Li

---

你在说哪个背景图片？ - Sami

Answer 1

这可以在启动幻灯片时完成。使用以下设置：

jQuery(function($){
    $.supersized({              
        fit_always : 0,
        fit_portrait : 0,
        fit_landscape : 0,
    });
});

- NicKnight

Answer 2

根据this，你可以自己做到这一点：

Supersized必须是全屏吗？ 不需要！ 您可以通过调整CSS文件中的＃supersized样式来定义尺寸。 您将需要将所有position:fixed实例更改为position:absolute。

因此，请更改此内容：

#supersized {  
    display:block; 
    position:fixed; 
    left:0; 
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
    width:100%; 
}

转换为：

#supersized {  
    display:block; 
    position:absolute;
    left:250px; 
    right:0;
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
}

然后将任何其他的position:fixed实例更改为position:absolute，这样你应该就完成了。

- Spiny Norman

---

谢谢Norman。我之前试过了。但是这样做会将整个背景向右推250像素...所以部分背景图像将被推出屏幕。 - Willie Li

你是否移除了 width:100% 并在 #supersized 中添加了 right:0，并且在 #supersized li 上设置了 position:absolute？我已经在演示中看到这个效果（如果你在 firebug / 开发者工具中尝试它，可能需要调整屏幕大小才能正常工作）。 - Spiny Norman

Answer 3

使用这个：

#supersized {  
    display:block; 
    position:fixed; 
    left:0; 
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
    width:100%; 
    margin:0;
    padding:0
}

- Bhushan wagh