次のスライド (Web ページ) に移動する左右の矢印が付いた jquery スライダーを持つ Web サイトを作成しました。すべてのコンテンツは 1 つの Web ページに含まれ、ハッシュを使用します。 http://www.ilandeistudio.com
ページごとに異なる全画面背景 (ハッシュ) が必要だったので、ここで見つけた DIV に全画面背景を配置する CSS 手法を使用しました (CSS 手法 1) http://css-tricks.com/perfect-full-ページ背景画像/
これは機能しますが、画像の高さが画面の下部からはみ出しているため、垂直スクロールバーが追加され、背景画像全体が表示されません。背景を少し歪ませても構いません (すべて w1024px x h682px です)。表示可能な領域に画像全体を表示したいだけです。
私はそれをCSSで動作させることができませんでした。誰かが提案を持っているかどうか教えてください。そうでなければ、誰かがjqueryソリューションを推奨できるかもしれません。しかし、これらのjqueryの例のほとんどを複数のハッシュのDIV内で機能させる方法がわかりません。
現在使用しているCSSは次のとおりです。
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
2 つのスライドの例を次に示します。
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<a href="#home" class="special-anchor"></a>
<div class="nav">
<a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
<span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<a href="#about" class="special-anchor"></a>
<!--Navigation starts-->
<div class="nav">
<a href="#" class="prev-button special-anchor" title="Previous">Previous</a>
<span class="rightnav"><a href="#" class="next-button special-anchor" title="Next">Next</a></span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>