CSS - HTML |通过css修复背景 [英] CSS - HTML | Fixing of background via css
本文介绍了CSS - HTML |通过css修复背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做了一个简单的页面在html和管理通过css我需要管理这个页面的背景我使用div id为背景，但现在我想从html页面中删除代码和管理从css因为移动版本问题i感谢这里的任何建议。
i made a simple page in html and managed by css i need to managed the background of this page i use div id for background but now i want to remove the code from html page and managed from css because of mobile version problem i feel here any suggestions please.
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=480,initial-scale=1">
<title>Halalat Newsletter Subscription - Arabic</title>
<meta charset="utf-8">
<link href="assests/css/ar/ar.css" rel="stylesheet" type="text/css">
<link href="assests/css/ar/media-queries.css" rel="stylesheet" media="screen" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="columnout" class="left">
<div id="column">
<a id="lanLnk" href="?lang=en" title="english" target="_self">english</a>
<?php echo validation_errors(); ?>
<?php echo form_open('user/create_user'); ?>
<?php echo form_hidden('language', 'ar');?>
<div class="OptForm">
<label>
<span style="color:white; font-size: 13pt"><img src="assests/images/ar/email.png" class="opt1">الايميل</img></span>
<input id="email" type="text" name="email">
</label>
<label>
<span style="color:white; font-size: 13pt"><img src="assests/images/ar/city.png" class="opt2">المدينة</img>
</span>
<select name="city" id="city">
<option value="jeddah" selected="selected">جدة</option>
<option value="riyadh">الرياض</option>
<option value="dammam">الدمام</option>
<option value="makkah">مكة المكرمة</option>
<option value="madina">المدينة</option>
</select>
</label>
<label>
<input id="submit-btn" name="Submit" type="submit" class="button" value="Submit">
</label>
</div>
<?php echo form_close(); ?> <!-- end of Form -->
<div class="footer_terms">
<a href="#" target="_blank">تسجيل الدخول</a>
| <a href="#" target="_blank">سياسة الخصوصية</a>
| <a href="#" target="_blank">الشروط والأحكام</a>
</div>
<div class="social">
<a href="http://www.facebook.com/halalat" target="_blank"><img src="assests/images/ar/facebook.png" width="48" height="48"></a>
<a href="http://www.twitter.com/halalatksa" target="_blank"><img src="assests/images/ar/twitter.png" width="48" height="48"></a>
<a href="#" target="_blank"><img src="assests/images/ar/linkedin.png" width="48" height="48"></a>
</div>
<!-- end of Footer -->
</div><!-- end of Cloumn Left -->
</div>
<div id="background-img" style=" margin-top:0; margin-left: auto; margin-right: auto; top:0px; left:0px; padding:0px; right top no-repeat; position:relative; z-index:1;">
<img src="assests/images/ar/bg_ar2.jpg" width="1181" height="650" alt=""></div>
</div><!-- end of Wrapper -->
</body>
</html>
CSS
@charset "utf-8";
body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#FFFFFF;
}
.left{
float:left; /* text-align:left; */
}
.right{
float:left;
text-align:left;
}
#wrapper{
margin:auto;
width:1180px;
height:750px;
top:0px;
left:0px;
padding:0px;
}
#columnout{
background:url(ar/form2.png) right top no-repeat;
width: 300px;
height: 406px;
margin-top: 210px;
position:absolute;
z-index:100;
}
#column{
width: 300px;
height: 500px;
text-align: right;
margin-left: 47px;
z-index: 1;
margin-top: -29px;
}
#lanLnk{
color:#0090D7;
font-size:0.83em;
font-weight:bold;
text-decoration:none;
margin-left:-10px;
line-height:21px;
display:block;
text-align:left;
}
#message-top{
height:51px;
width:200px;
display:block;
background:url(images/message_top.png) right top no-repeat;
text-indent:-100000px;
}
.seperator {
border: solid 1px #dddddd;
margin: 13px -20px 15px 0px;
width: 250px;
margin-left:-20px;
}
form{
width:40px;
height:290px;
font-size: 14px;
font-weight: bold;
color: #525252;
text-decoration: none;
}
.OptForm{
width:200px;
line-height:28px;
margin-top:31px;
}
input{
width:200px;
display:block;
font-size:0.83em;
color:#333;
border: 1px solid #d1d1d1;
height: 25px;
margin:0px 0 7px 0;
display:block;
}
select#city{
width:200px;
display:block;
font-size:1.5em;
color:#333;
direction: rtl;
border: 1px solid #d1d1d1;
height: 30px;
margin:0px 0 7px;
display:block;
}
input#submit-btn {
margin-top:20px;
width:251px;
height:51px;
border: 0px;
display:block;
background:url(ar/register_ar.png) right top no-repeat;
text-indent:-100000px;
margin-right:0px;
margin-left:-20px;
}
input.button { text-indent: -6000px; text-transform: capitalize; }
#error-message {
width: 333px;
margin-top: 20px;
background-color: #F8991D;
color: #333;
font-size: 0.9em;
padding: 5px 45px 5px 5px;
margin-top: 10px;
margin-right: -35px;
line-height: 18px;
}
#InMessage{
color:#FFFFFF;
font-size:0.75em;
width:275px;
line-height:13px;
text-align:left;
margin-top:auto;
margin-left:-30px;
}
.footer_terms {
text-align: left;
margin-top: 25px;
margin-bottom: 20px;
width:350px;
display:block;
font-size:0.70em;
color:#555555;
margin-top:90px;
margin-left:-40px;
}
.footer_terms a{
text-decoration:none;
color:#555555;
font-weight:bold;
}
.footer_terms a:hover{
text-decoration:none;
color:#0090D7;
}
.social {
width:170px;
text-align:left;
margin-right:1px;
margin-top:10px;
}
.opt1 {
width:44px;
height:39px;
text-align:left;
margin-right:100px;
}
.opt2 {
width:44px;
height:39px;
text-align:left;
margin-right:100px;
}
推荐答案
#wrapper div基本上我wana修复为移动用户只有背景显示为普通用户，但用户来自移动，所以它显示diff i共享代码提及以下。
i fix this background issue in #wrapper div basically i wana fix for the mobile user only background shows for the normal users but the user come from mobile so it shows diff i share code mention below.
正常用户来自pc
#wrapper{
background: url(ar/bg_ar2.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
margin:auto;
width:1180px;
height:750px;
top:0px;
left:0px;
padding:0px;
}
移动用户
#wrapper{
background-image: none !important;
margin:auto;
width:auto;
height:auto;
top:0px;
left:0px;
padding:0px;
}
感谢大家的建议和想法。
Thanks everyone for your suggestions and ideas.
这篇关于CSS - HTML |通过css修复背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
