テキスト入力フォームとボタンのある背景画像を含むカスタマイズされたウィジェットを作成しようとしています。私が使用しているワードプレスのテーマは、TwitterBootstrap上に構築されたレスポンシブデザインです。ブラウザのサイズを変更すると、フォームとボタンのサイズが背景画像に合わせて変更されません。誰かが私がこれを正しく機能させるのを手伝ってもらえますか？ウィジェットは、ライブサイトのページの右側にあるサイドバーの一番下に表示されます。
ありがとう。
<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center;
padding: 30% 0;" 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:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" 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" style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" />
これが私のstyles.cssです（これは子のテーマです）
/* ------------------------------------------------------------------------ Import Standard Styles */
@import url( '../standard3/style.css' );
/* ------------------------------------------------------------------------ Customizations */
#disqus_thread {
clear: both!important;
background: white;
background: white;
margin: 0 0 40px 0;
position: relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px;
}
.dsq-comment-text p
{
color: black;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 243px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 70px;
}
.widget .signupForm form input {
display: block;
}
//* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 50px;
}
}
/* adjust slightly for larger sizes */
@media screen and (min-width: 980px) {
.widget .signupForm {
width: 343px;
height: 275px;
background-size: 100%;
}
.widget form .signupForm {
right: 160px;
bottom: 70px;
}
}
/* ------------------------------------------------------------------------ Media Queries */
/* Smartphones */
@media (max-width: 480px) {
}
/* Tablet and Mobile */
@media (max-width: 979px) {
}
/* Mobile to Tablet */
@media only screen and (max-width: 767px) {
}
/* Landscape Tablets */
@media (min-width: 768px) and (max-width: 979px) {
}
/* Desktop */
@media (min-width: 980px) {
}