이미지 상단에 양식을 놓고 CSS에서 올바르게 크기를 조정하려면 어떻게합니까?

Question

나는 반응 형 테마의 이미지 (배경) 위에 이메일 양식으로 구독하는 Feedburner를 배치하는 사용자 정의 위젯을 만들려고합니다. 현재 배경에 사용중인 이미지가 올바르게 표시되지 않습니다. 현재 위젯에는 주로 두 가지 문제가 있습니다. 하나는 이미지가 위젯 자체 내에서 정확하게 크기가 조정되지 않습니다. 그리고 두 가지, 브라우저 크기를 조정할 때 배경 이미지의 크기가 올바르게 조정되지 않습니다.

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;