2015-02-10 167 views
0

我有一個背景我想使用它與我的內容形成鮮明對比,除了圖像底部的25%左右。我怎樣才能將25%的位置與內容的底部對齊,或者距離底部的距離?對內容的高度與頁面寬度不同,背景有大小蓋如何將div背景與其內容的底部對齊

HTML

<div class="firstPanel">content here</div> 

CSS

.firstPanel { 
    background-image: URL("path-to-background"); 
    background-position: 50% 70%; 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    padding: 20px; 
    padding-bottom: 100px; 
} 
+1

的選擇應該是'.first.panel' – j08691 2015-02-10 17:47:48

+0

看起來像自動更正改變了它,固定 – 2015-02-10 18:00:01

+0

可是仍然不對 – j08691 2015-02-10 18:02:22

回答

0

從我在你的問題的理解,在CSS中,你會增加這個:

margin-bottom:25%; 

這指定了容器的寬度百分比元件。

+0

這讓我更接近,但它仍然重疊時窗口更窄,文本開始打包,並且我希望空間比窗口更寬時的空間小 – 2015-02-10 18:04:24

+0

嘗試將此添加到CSS:'position:relative; z-index:1;' – 2015-02-10 19:08:26

+0

似乎除了導致div在另一部分之上繪製之外沒有太多的工作。如果將媒體查詢的margin更改爲填充並使用'margin-bottom:calc(250px - 25%)'將值保留爲<0,可以修復較大的空間,但在狹窄時我該怎麼辦? – 2015-02-11 00:37:38

0

使用此在css文件

*{ 
    margin: 0; 
    padding: 0; 
} 

它會清除頁面中的所有不可避免的空間。

+0

我有'body {margin:0;填充:0; }」 – 2015-02-10 18:01:43