0

レスポンシブテーマの画像（背景）の上にFeedburnerのメール購読フォームを配置するカスタムウィジェットを作成しようとしています。現在、背景に使用している画像が正しく表示されていません。現在、ウィジェットには主に2つの問題があります。1つは、ウィジェット自体の中で画像のサイズが正しく変更されていないことです。2つ目は、ブラウザのサイズが変更されたときに背景画像のサイズが正しく変更されないことです。

このページのサイドバーの一番下までスクロールすると、私が作業しているカスタムウィジェットを見ることができます。

これが、ウィジェットの作成に使用しているコードです。

<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" />
4

1 に答える 1

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;
于 2012-05-17T00:44:53.987 に答える