CSS - HTML | Fixing of background via css

Question

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

How about cleaning up your code to include only the necessary parts, and e.g. replace your page content with a comment saying "content"? — PurkkaKoodari
– PurkkaKoodari, Commented Jan 11, 2014 at 8:27
NO, you see the html code in end of page i mention in div id=background-img , i need to move from there to css but when i cut this code from here and mention in css so this background image not work. — FormaL
– FormaL, Commented Jan 11, 2014 at 8:30
Just replace the contents of <div id="columnout"> with e.g. . — PurkkaKoodari
– PurkkaKoodari, Commented Jan 11, 2014 at 8:36
@FormaL : Do you want to set the image as the background image of the whole html page or only the 'div' with id 'background-img'? — Akanksha
– Akanksha, Commented Jan 11, 2014 at 9:34

CBeTJlu4ok · Accepted Answer · 2014-01-11 08:29:40Z

0

I think what you need is:

body {
    background-image: url('here goes some address');
    background-size:cover;
    background-attachment: fixed;
}

but not sure if I understood you corectly

answered Jan 11, 2014 at 8:29

CBeTJlu4ok

1,1124 gold badges19 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FormaL Over a year ago

i already check this even in css i mention separate class and add image but problem is same background image not displaying thats why i ask the suggestion :/ if you need i will share a demo url of my page.

CBeTJlu4ok Over a year ago

Sorry but I still don't undestand the question, but you have this right top no-repeat properties on #background-img which are not assigned to anything.

shet_tayyy · Accepted Answer · 2014-01-11 08:35:38Z

0

Your question is unclear.. But according to what i understood you wanna simplify it for mobile version.. You can try colors or gradients that are already available in html and CSS.. This would also make the page load faster in mobile version than an image

answered Jan 11, 2014 at 8:35

shet_tayyy

5,79612 gold badges56 silver badges95 bronze badges

Comments

FormaL · Accepted Answer · 2014-01-11 09:49:00Z

0

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.

Normal user coming from 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;
    }

For mobile user

#wrapper{   
    background-image: none !important;
    margin:auto;
    width:auto;
    height:auto;
    top:0px;
    left:0px;
    padding:0px;
    }

Thanks everyone for your suggestions and ideas.

answered Jan 11, 2014 at 9:49

FormaL

3592 gold badges5 silver badges19 bronze badges

4 Comments

Anima-t3d Over a year ago

You need to turn background into background-image or you'll encounter issues where your attachment and repeat overwrite your shorthand written background. Also no need to add px to zero, it's always zero no matter what unit. No need to add top and left since there is no positioning applied like absolute, relative or fixed.

FormaL Over a year ago

for normal public web i use background but for mobile users i remove background, alright i will remove this opx thanks for your help.

CBeTJlu4ok Over a year ago

do you have separate code for checkin if user is mobile or pc? Just a note: you can use media queries for show different styles for different width

FormaL Over a year ago

@Mpa4Hu For mobile users i use codeigniter library thats why not needed to use media queries with this its very easy to handle which user coming from mobile.

Collectives™ on Stack Overflow

CSS - HTML | Fixing of background via css

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related