배경 이미지를 배치 할 때 내용물이 남아 있지 않음

배경 이미지가 올바르게 작동하는 데 문제가 있습니다. 여기 내 테스트 페이지의 URL 링크배경 이미지를 배치 할 때 내용물이 남아 있지 않음

은 당신이

enter image description here

문제는

여기에 위치 할 수있는 배경 이미지 ... 을 가지고 볼 수있는 지금이다

창 크기를 조정하면 이미지가 제대로 양식을 포함하는 상자와 함께 이동하지 않습니다
또한 bg 이미지가 표시된 jpeg 이미지와 똑같이 표시되는 데 많은 어려움을 겪고 있습니다. 그 위치는 .... 어떤 아이디어입니까?

HTML

<!DOCTYPE html> 
<html class="no-js"> 
<head> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<script src="js/modernizr.custom.15081.js"></script> 
<link href="css/custom.css" rel="stylesheet"> 
<!--[if lt IE 9]> 
     <script src="js/html5shiv.js"></script> 
     <script src="js/respond.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="container"> 
    <div class="desktopBody"> 
    <div class="header"> 
     <div class="col-sm-2 logo"> <a href="" target="_blank" title="Virgin Mobile"><img src="images/logo_virginMobile.png" alt="" class="img-responsive text-right"/></a> </div> 
     <div class="col-sm-2 thankYou"> <img src="images/txt_THANKYOU.png" alt="THANK YOU" class="img-responsive text-right "/> </div> 
     <div class="col-sm-8"> 
     <div id="menu-outer"> 
      <div class="table"> 
      <ul class="menu" id="horizontal-list"> 
       <li class="first"><a href="http://www.virginmobile.com.au/privacy/" target="_blank" title="Privacy Policy">Privacy policy</a></li> 
       <li class="second"><a href="#" title="Terms and Conditions" target="_blank" >Terms and Conditions</a></li> 
       <li class="last"><a href="http://www.virginmobile.com.au/contact-virgin-mobile/" target="_blank" title="Contact Us">Contact Us</a></li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
    <div class="body"> 
     <h1 class="specialGift col-sm-12">A special gift just for you...</h1> 
    </div> 
    <div class="form"> 
     <div class="clearfix"></div> 
     <div class="clearfix"></div> 
     <div class="form"> 
     <form class="form-horizontal" role="form" name="submitDetails" action="choseGiftpage.html" method="POST" id="submitDetails" autocomplete="off" onload="ClearForm()"> 
      <legend>Thanks for being a great<br/> 
      customer, you rock! </legend> 
      <fieldset class="virgin"> 
      <div class="col-sm-12 col-xs-12"> 
       <div class="col-sm-6 col-xs-12"> 
       <input value="" id="virginMobileNumber" name="virginMobileNumber" type="text" placeholder="Virgin Mobile Number" class="form-control input-md virginMobileNumber"/> 
       <span class="error">Oops - please enter your mobile number</span> </div> 
       <div class="col-sm-6 col-xs-12"> 
       <input value="" id="giftRedemtionCode" name="giftRedemtionCode" type="text" placeholder="Gift redemption code" class="form-control input-md giftRedemtionCode"/> 
       <span class="error">Oops - please enter gift redemption code</span> </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="col-sm-12 col-xs-12 divTwo"> 
       <div class="col-sm-6 col-xs-12 captcha"><img src="images/captchaPlaceholder.png" alt="captcha" /></div> 
       <div class="col-sm-6 col-xs-12 captchaText"> 
       <input value="" id="captchaText" name="captchaText" type="text" placeholder="Type characters on left" class="form-control input-md captchaText"/> 
       <span class="error">Oops - please enter character</span> </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="col-sm-12 col-xs-12 divTwo"> 
       <div class="col-sm-6 col-xs-12 mandatoryText">All fields are mandatory</div> 
       <div class="col-sm-6 col-xs-12 submitButton"> 
       <button id="submit" name="submit" class="btn sr-only" title="CHOOSE YOUR GIFT" type="submit">CHOOSE YOUR GIFT ></button> 
       <button id="submit" name="submit" class="btn submit" title="CHOOSE YOUR GIFT" type="submit">CHOOSE YOUR GIFT ></button> 
       </div> 
      </div> 
      </fieldset> 
     </form> 
     </div> 
    </div> 
    <div class="footer"> </div> 
    </div> 
</div> 
<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

CSS

당신의 몸은 속성 CSS에 thsi을 추가, 몸 BG으로 이미지를 설정 한 이후

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; 
}

출처

2013-12-19 Hello Universe

마크 업을 표시 할 수 있습니까 ?? html 및 css ??? – NoobEditor

@Mayank 코드 추가 –

@Himu : 브라우저의 너비와 상관없이 'body background image'를 유지하고 싶습니까? – NoobEditor

여기

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

가있다 데모 DEMO

당신이를 BG 줄 것이다

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

이 : 10

그러나는 페이지의 디자인으로가는, 내 제안처럼, 당신의 form 클래스에이 bg를 몸에 대한 color을 설정하고 추가하는 것 다양한 브라우저 너비에서 폼 클래스에 따라 조정을 확장하는 최적의 장소 !!

출처

2013-12-19 12:12:33 NoobEditor

배경 이미지를 배치 할 때 내용물이 남아 있지 않음

답변

관련 문제