Placement of background image not remaining ok with the contents

Question

I am having trouble getting background image working properly. Here is my test page URL link

Now as you can see that it has a background image... which can be located at here

enter image description here

The problem is

When you resize the window, the image does not move along with the box that contains the form properly
Also, I am having lots of trouble getting the bg image show up exactly like the jpeg image shown....that is the placement....any ideas please?

HTML













  
    
        
        
      
        
          
            
              Privacy policy
              Terms and Conditions
              Contact Us
            
          
        
      
    
    
    
      A special gift just for you...
    
    
      
      
      
        
          Thanks for being a great

          customer, you rock! 
          
            
              
                
                Oops - please enter your mobile number 
              
                
                Oops - please enter gift redemption code 
            
            
            
              
              
                
                Oops - please enter character 
            
            
            
              All fields are mandatory

CSS

body {
    font-family: Helvetica, sans-serif, Arial;
    font-size: 10px;
    color: #626366;
    margin: 0 auto;
    background: url("../images/bg_body.png") no-repeat scroll 60% 121% #FAFAFA;
    max-width: 1400px
}
.form {
}
a {
    color: #626366;
}
a:hover, a:focus {
    color: #6b1f7c;
    text-decoration: underline;
}
.error {
    color: #e11f27;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.1em;
    font-style: italic
}
h1 {
    color: #2d2d2d;
    font-family: "ProximaNova_ltlight", Helvetica, sans-serif, Arial;
    font-size: 4.2em;
}
h1.specialGift {
    margin-top: 38px;
    margin-bottom: 40px;
    text-align: center
}
.mandatoryText{
    color: #7b7b7d;
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 1.1em;
    text-align:center;
    line-height:33px;

}
.container {
    padding-top: 22px;
    padding-bottom: 55px;
    max-width: 1400px;
}
.header {
    max-width: 685px;
    margin: 0 auto
}
.thankYou {
    margin-top: 3%;
    padding: 0px;
}
.menu {
    list-style: none;
}
.header li a {
    font-family: "ProximaNova_ltlight", Helvetica, sans-serif, Arial;
    font-size: 1.1em;
    float: left;
    color: #626366;
    margin-top: 2%
}
.first a {
    margin-left: 17.5%;
    margin-right: 31px;
}
.second a {
    margin-right: 27px
}
.table {
    margin-bottom: 0px
}
form {
    max-width: 510px;
    height: 353px;
    margin: 0 auto;
    background: none #f1edea;
    border: 2px solid #e5e1de;
    padding-left: 34px;
    padding-right: 24px;
    padding-top: 34px;
    padding-bottom: 34px;
}
legend {
    color: #692789;
    font-family: "ProximaNova_ltlight", Helvetica, sans-serif, Arial;
    font-size: 2.903em;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
}
.form-control {
    border: 1px solid #a1a1a1;
    box-shadow: none;
    transition: none;
    -webkit-transition: none;
    border-radius: 0px;
    font-family: Verdana, Geneva, sans-serif;
    color: #a1a1a1;
}
.form-control:focus, .form-control:hover {
    border: 1px solid #a1a1a1;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control.giftRedemtionCode{
    background:url("../images/question.png") no-repeat scroll 97% center #ffffff;
}
.virgin .col-sm-12 {
    padding-right: 0px;
    padding-bottom: 15px;
}
.virgin div:first-child {
    padding-left: 0px;
}
.virgin div+div {
    padding-right: 0px;
}
.virgin .col-sm-12.divTwo {
    padding-left: 0px;
}
.submit,.submit:hover,.submit:focus,.submit:active {
    background: url(../images/btn_gift.png) no-repeat 0 0 #FAFAFA;
    text-indent: -9999px;
    text-transform: capitalize;
    width: 100%;
    outline:none;
}

NoobEditor · Accepted Answer

Since you have set the image as bg for body, add thsi to your body attribute css

    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position : center center;

Here is a demo DEMO

But, going by the design of your page, my suggestion would be to set a color for the body and add this bg to your form class, like :

body {
       font-family: Helvetica, sans-serif, Arial;
        font-size: 10px;
        color: #626366;
        margin: 0 auto;
        max-width: 1400px;
        background-color:#FAFAFA; /*assign body color*/
   }

  .form {
        background: url("http://swagatobhatta.com/test/images/bg_body.png") no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        background-position : center center;
        width:100%; /*give full available width to form*/
    }

This will give you bg a more optimal place to expand a adjust according to your form class on varying browser widths!!

Placement of background image not remaining ok with the contents

Answers (1)

Related Questions