与哈希在同一页面上的多个全屏幕背景 - CSS或者也许Jquery

我做了一个网站，有一个jQuery的滑块左右箭头移动到下一张幻灯片（网页）。所有内容都包含在一个网页中，并使用散列。 http://www.ilandeistudio.com 与哈希在同一页面上的多个全屏幕背景 - CSS或者也许Jquery

它需要为每个页面（散）不同的全屏背景，所以我使用的CSS技术，使全屏幕的背景中，我发现这里的DIV（CSS技术1） http://css-tricks.com/perfect-full-page-background-image/

该作品但图像的高度在屏幕底部运行，因此添加了垂直滚动条，并且看不到整个背景图像。我不介意扭曲背景一点（他们都是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; } 
    }

这里是两个幻灯片

   <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>

来源

2012-04-19 user1269988

本身看起来正确的代码的例子。有一件事，你没有包括，但我会确保的是，你所列出的标题和导航绝对定位在网页上的，而不是向左浮动，并使用边距来定位事物。这将为页面的100％增加空间。

因此，图像本身正在扩展到页面高度，标题和导航的高度被添加到页面的顶部。如果您似乎滚动这些对象的高度，最有可能是这个问题。

来源

2013-01-06 02:00:37 user1952086

与哈希在同一页面上的多个全屏幕背景 - CSS或者也许Jquery

回答

相关问题