強制圖像到頁面頂部

我想將圖像移動到頁面頂部：鏈接已移除，請參閱下文。強制圖像到頁面頂部

編輯︰上面的鏈接已被刪除。你可以看到這樣的例子：http://bixproduce.wpengine.com/bix-word/

我希望這個圖像保持全寬，坐在頁面的頂部，登錄輸入顯示在圖像上。這是功能上：http://bixproduce.wpengine.com/

但我只是不能使它在圖像中的文章工作。我已經嘗試過溢出，清除，位置等多種組合，但沒有任何效果。

html看起來像這樣：（編輯）我想我不能把html放在這裏。

我的CSS目前看起來是這樣的：

.single .entry-thumb {clear: left;overflow: hidden;top: 0 !important;} 
.single .entry-thumb img {float: left;}

我不得不使用清晰溢出迫使入門拇指DIV是相同的高度圖像。

我試過用'position：absolute;'在入門拇指div上，但是會以某種方式縮小圖像，並且不再填充整個寬度。

如果我手動爲圖像和div設置固定高度，然後定位絕對工作，但入口包裝div移動到屏幕頂部，似乎忽略圖像存在的事實。因爲其他一切都是響應的，圖像的固定高度並不理想。

我已經嘗試了很多修復源，並測試了很多可能性。我無法讓它工作。任何幫助將不勝感激。

謝謝賈裏德

來源

2015-11-19 Jared Wilcox

你應該使用該圖像作爲'背景'而不是html中的圖像。 –

我試圖wmeade的解決方案。它確實有效，但會導致頁面上出現一些不合需要的樣式。

Nenad Vracar解決方案也不是完全可行的，因爲這是一個WordPress的網站，有問題的圖像是一個特色的圖像。你不能通過css添加精選圖像，至少不能用你的樣式表。

然後我採納了他的建議，並做了一些研究，看看是否可以強制Wordpress將特色圖片作爲背景圖片。我發現這個：https://wordpress.org/support/topic/insert-featured-image-in-div-style-background並用它來修改我的文章模板文件。現在看起來很棒，一切正常。

感謝您的幫助！

來源

2015-12-08 18:22:27

嘗試減少您的top財產幾個像素，並調整圖像到它適合你。 -65px在我在頁面上測試時似乎工作。

.single .entry-thumb {clear: left;overflow: hidden;top: -65px !important;}

注：僅使用!important作爲最後的手段。因此，請在不使用!imporant的情況下進行測試，並查看一切情況。從HTML

來源

2015-11-19 23:08:30 wmeade

這是有效的。感謝您的幫助。 –

刪除圖像，並添加到您的

CSS

article { 
    background: url("http://bixproduce.wpengine.com/wp-content/uploads/2015/11/produce-on-wood-hd-01-1184x275.jpg"); 
    background-size: cover; 
    background-position: center; 
} 

.entry-wrap { 
    padding: 100px 0; 
}

來源

2015-11-19 23:18:04

強制圖像到頁面頂部

回答

相關問題