Can someone please help me figure out how to get this background image (and form) to resize correctly?

Question

On my site if you scroll all the way to the bottom of the side bar (on the right hand side) you'll see a email sign up box I'm trying to make (via a text widget.) I've tried all day to get this to work correctly, and can't figure it out. One thing works, and another breaks. I'm not sure if I should post what it is in my text widget or what's in my style.css here for you guys to look it. Maybe someone can check the link and see if they can see what happening. I'll be glad to post the code if needed. The theme is responsive using Twitter bootstrap.

Here is my custom.css (this is a child theme) Feel free to let me know if I need to change any of this.

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

The answer is very simple. The background-image you are using has a width of 370px, but #sidebar which houses the widget only has a width of 300px.

Solution 1
You need to reduce your image to the correct width using imaging software or increase the width of the the #sidebar.

Solution 2
Or you can change the position of the background so that the text bubble is not the part being cut off.

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

Solution 3
You can use CSS3 to fit the background-image using background-size:

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

Support is limited though: https://developer.mozilla.org/en/CSS/background-size

EDIT : Based on CSS being posted

You can use the original size image you had. The rule that already has background-size declared is getting lost because of this line of CSS:

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

Remove the first forward slash and all the CSS should work properly:

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

And to position the form out of the way of the image change all of the rules that say .widget .signupForm form:

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