如何在不使用WordPress表格的情況下獲取完整的完整背景圖片（無需重複）？

我在WordPress把這個在小部件：如何在不使用WordPress表格的情況下獲取完整的完整背景圖片（無需重複）？

<div style="background-image: url('http://www.domain.net/img/subscribe.png'); 
background-repeat: no-repeat;"> </div>

但結果是這樣的：

What I'm seeing

當我想要的結果是這樣的：

Desired result

所以它幾乎沒有顯示我想要的背景圖像的頂部。我怎樣才能獲得完整的圖像 - 但我當然不希望它重複x，或重複y？我應該使用div標籤還是其他的東西？任何在這方面的指導，將不勝感激！

來源

2014-02-12 Jason Weber

您是否爲'div'指定了高度？另外，如果你所做的只是顯示圖像，''標籤可能會更好...... –

'background-size：cover'可能比'background-repeat'更好，但無論哪種方式，你都必須設置你的'div'的大小..（你確定你不想要'img'標籤..？） – thebjorn

將div的寬度/高度設置爲與背景圖像相同的大小。我建議是這樣的：

HTML

<div class="newsletter-subscribe"> 
    <!-- any additional content can go here, like a <form> for example --> 
</div>

CSS

.newsletter-subscribe { 
    background-image: url('http://www.domain.net/img/subscribe.png'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    width: 400px; /* whatever the picture width is */ 
    height: 300px; /* whatever the picture height is */ 
}

爲什麼你把這個樣式表中，而非內聯的原因，是爲了讓您可以更輕鬆地將其他樣式應用於您的容器（即div.newsletter-subscribe），並在樣式表中進行更改 - 而不是模板和/或部分文件。樣式在樣式表中比在線樣式更容易維護。

來源

2014-02-12 19:48:44 dward

謝謝Dward！我試圖實現你的解決方案，這是完全合理的。感謝您花時間解釋。出於某種原因，我現在正在獲得圖像應該顯示的空白區域。我仔細檢查了拼寫，圖像的URL等，並且一切都是正確的。我試圖沖洗我的網站的緩存無濟於事。但我認爲你的解決方案是正確的 - 我會繼續嘗試！ –

如果您不打算在圖片上放置任何其他元素（比如表單或其他文本），那麼您可以更容易地將其作爲圖片「」進行管理。我已經通過兩種方式設置了一個演示來實現您的目標：http://jsfiddle.net/f9PCd/ – dward

仍在繼續工作，Dward。基本上，我試圖嘲笑Yoast在他的側邊欄上的簡訊中所做的事情：https://yoast.com/ ....使用該背景圖片。如果你想看到我正在使用的URL，它是http://www.netprezence.net ... –

如何在不使用WordPress表格的情況下獲取完整的完整背景圖片（無需重複）？

回答

相關問題