在静态网站上使用CSS的全宽屏幕背景滑块

Question

我有一个静态网站，我需要创建一个固定高度为587px的背景滑块。每个图像的宽度为2000px宽，但用户只需要在超过1000px（网站宽度）的屏幕宽度上看到图像。图像不需要以任何方式移动，拉伸或响应。

它需要外观和功能，如www.adsphoenix.com/2013design/index5.php，但它是一个背景滑块。如果选择“查看背景图像”（Firefox），您将看到图像比大多数屏幕更宽。它与中心和顶部对齐。

我遇到的问题是找到一个滑块，允许图像超出1000px网站。例如，www.adsphoenix.com / 2013design /。所有这些图像都是587 x 2000px。

与此相似的是，www.chattanoogafun.com。但是，此滑块会拉伸。

你知道一个可以使用的预制滑块吗？或者滑块我可以改变对齐方式？或者我可以对我的代码做些什么来让它工作？我有Blue Host托管。

Answer 1

您可以使用CSS将图像添加为滑块div的背景图像，并使用以下代码：

.slider_div { //or another selector

    background: url(../path/to/image) center center no-repeat;

}

如果你想滑动你的背景，你需要内联CSS来设置滑块div的背景（或者使用jQuery）。