在html中有全寬主頁

-1

我有一個頁面可以左右滾動到html中。在html中有全寬主頁

我不想那樣。

我想要的是我的杯子，書中可以看到沒有滾動和中心的背景圖像。

<div class="container maindiv " >  
    <img class="img-responsive book" src="http://i.imgur.com/dLCTiyn.png"> 
    <img class="img-responsive cup" src="http://i.imgur.com/AULhYEH.png"> 
    <div class="black_bg"> 
    <ul class = "menudiv"> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
    <div class= "para"> 
    <p> 
    lorem ipsum 
    </p>  
    <p> 
    lorem ipsum 
    </p> 
    <p> 
    lorem ipsum 
    </p> 
    <p> 
    lorem ipsum 
    </p> 
</div>  

    <div class= "para1"> 
    <p > 
    lorem ipsum 
    </p>  
    <p> 
    lorem ipsum 
    </p> 
    <p> 
    lorem ipsum 
    </p> 
    <p> 
    lorem ipsum 
    </p> 
</div>  
</div> <!--black_bg--> 
</div>

杯子和書圖像位於背景圖像的左側和右側。

這裏是fiddle爲相同。

請建議。

來源

2015-11-05 Suraj

你是這樣看的嗎？ ** http：//jsfiddle.net/tL9raxfL/9/**或請清楚您的要求 –

看到這個小提琴http://jsfiddle.net/tL9raxfL/10/ –

嘗試在CSS這個類：

.cup{ 
    height:167px; 
    position:absolute; 
    left:0; 
    top: 134px; 
    z-index:1000; 
} 

.book{ 
    height: 167px; 
    position: absolute; 
    right:0; 
    top: 134px; 
    z-index:1000; 
}

來源

2015-11-05 06:57:35

這將隱藏杯子和書圖像。我的實際應用程序更復雜，比小提琴更多的東西。 – Suraj

這本書和杯子沒有隱藏起來：http://jsfiddle.net/sebastianbrosch/tL9raxfL/4/ –

我不希望它像我說的那樣滾動。如果你看到我的小提琴和你的，它仍然是相同的 – Suraj

-1

這是你在找什麼？

https://jsfiddle.net/tL9raxfL/13/

.cup{ 
height: 167px; 
position: fixed; 
//left: -158px; 
top: 134px; 
z-index: 0; 
} 

.book{ 
height: 167px; 
position: fixed; 
right: -200px; 
top: 134px; 
z-index: 0; 
}

來源

2015-11-05 07:07:03

不，這本書在哪裏。這本書在你的小提琴中不可見。 – Suraj

- 更新了小提琴 - 現在檢查它 –

這可能是這樣的，你必須使用position:fixed的圖像和給他們有效的left和rightposition爲：

.cup{ 
    height: 167px; 
    position: fixed; 
    //left: -158px; 
    top: 134px; 
    z-index: 0; 
} 

.book{ 
     height: 167px; 
     position: fixed; 
     right: 0px; 
     top: 134px; 
     z-index: 0; 
}

和這裏的工作演示

DEMO

來源

2015-11-05 07:10:58

在html中有全寬主頁

回答

相關問題