1. 首頁
  2. 問答
  3. 背景圖像作爲固定背景

背景圖像作爲固定背景

2014-03-27 261 views
0

我不知道爲什麼我的背景圖像沒有顯示。我無法看到開發工具中的圖像，我很難過。它位於文件夾中並指向正確的文件夾。任何幫助表示讚賞！這裏是我的代碼：背景圖像作爲固定背景

HTML：

<body> 
<div class="l-head-backImage"></div> 

<div class="container"> 
    <header> 
     <h1>This is the Header</h1> 
    </header> 
</div><!-- container -->

CSS：

.l-head-backImage { 
background: url(../images/Seattle.svg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2014-03-27 Waymond

回答

2

你告訴它覆蓋DIV;但是，div沒有實際大小，因爲它沒有內容。因此，您需要指定div的寬度和高度，以便圖像實際上可以覆蓋。

實例與您的代碼和隨機狗圖片：JS Fiddle

CSS

.l-head-backImage { 
    background: url(../images/Seattle.svg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 300px; 
    width: 300px; 
    }

來源

2014-03-27 04:09:07

+0

嘗試過了，它仍然沒有工作。它看起來像是被推到頁面上方。我正在使用骨架網格。我不知道這個信息是否與這個問題有關。謝謝您的幫助。 – Waymond

+0

如果圖片被推送，也許你在一個包裝頁面中使用邊距樣式？我不會對Skeleton Grid有所幫助，但是您可以在js小提琴中看到圖像至少會顯示寬度和高度。 –

+0

當然。謝謝！ – Waymond

相關問題

 相關問題