0
我無法正常獲取背景圖片。這是我的測試頁網址鏈接背景圖片的放置不能保持正常與內容
現在，你可以看到它有一個背景圖片... 可以位於這裏
的問題是
- 當您調整窗口大小時，圖像不會與包含表單的框一起移動
- 此外，我有很多麻煩讓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
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;
}
你可以顯示你的標記？html和css？ – NoobEditor
@Mayank添加代碼 –
@Himu：所以你想保持'身體背景圖像'在它的位置，而不考慮瀏覽器寬度？ – NoobEditor