如何將圖像放置在圖像頂部並使其在CSS中正確調整大小？

Question

我正在嘗試創建一個自定義小部件，它將Feedburner通過電子郵件形式訂閱到響應主題中的圖像（背景）上。現在我用於背景的圖像沒有正確顯示。目前這個小部件主要有兩個問題。其一，圖像在widget本身內沒有正確調整大小。而且，在調整瀏覽器大小時，背景圖像不能正確調整大小。

您可以看到自定義窗口小部件我的工作，如果你滾動一路下跌到側邊欄的底部上this page。

這裏是我用來創建插件的代碼。

<form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://wpdallas.com/plain/wp-content/uploads/2012/04/noah-side-bar.jpg);" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
    <p> 
     <input type="text" style="width:200px;height:20px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
    </p> 
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
    <input type="submit" value="Subscribe" /> 

Answer 1

你應該試試這個樣式表的形式，並會在每個顯示分辨率上看起來不錯。

border: 1px solid #CCC; 
padding: 3px; 
text-align: center; 
background: #f09e30 url(http://wpdallas.com/plain/wp-content/uploads/2012/04/noah-side-bar.jpg) no-repeat left bottom; 
padding: 35% 0;