有人可以帮我弄清楚如何让这个背景图像（和表单）正确调整大小吗？

Question

在我的site 上，如果您一直滚动到侧栏的底部（在右侧），您会看到我正在尝试制作的电子邮件注册框（通过文本小部件。）我整天都在尝试让它正常工作，但无法弄清楚。一件事起作用，另一件事坏了。我不确定是否应该在我的文本小部件中发布它的内容，或者我的 style.css 中的内容供大家查看。也许有人可以检查链接，看看他们是否能看到发生了什么。如果需要，我很乐意发布代码。该主题使用 Twitter 引导程序进行响应。

这是我的 custom.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/noah-side-bar1.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;

    /* height ensures full pic is shown  */
    height: 300px;    

    /* 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) {

}

Answer 1

答案很简单。您使用的 background-image 的宽度为 370px，但包含小部件的 #sidebar 的宽度仅为 300px。

解决方案 1
您需要使用成像软件将图像缩小到正确的宽度或增加#sidebar 的宽度。

解决方案 2
或者你可以改变背景的位置，让文字气泡不是被截断的部分。

.widget .signupForm{ background-position: -19px 0;}

解决方案 3
您可以使用 CSS3 来适应 background-image 使用 background-size:

.widget .signupForm{ background-size: contain; }

支持有限：https://developer.mozilla.org/en/CSS/background-size

编辑：基于发布的 CSS

您可以使用您拥有的原始尺寸图像。由于这行 CSS，已经声明了 background-size 的规则正在丢失：

//* now just resize the widget box and move the form */

删除第一个正斜杠，所有的 CSS 应该都能正常工作：

/* now just resize the widget box and move the form */

为了将表格放置在图像之外，请更改.widget .signupForm form的所有规则：

.widget .signupForm form {
    bottom: 50px; /* change to 0 */
    right: 120px;
}