html - CSS: Background not stretching on mobile devices -


i've been kicking around css background on 'index.html' while , can't stretch on mobile devices. following index page:

<!doctype html> <html lang="en"> <head>    <!-- basic page needs   –––––––––––––––––––––––––––––––––––––––––––––––––– -->   <meta charset="utf-8">   <title>home</title>   <meta name="description" content="">   <meta name="author" content="">    <!-- mobile specific metas   –––––––––––––––––––––––––––––––––––––––––––––––––– -->   <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- font   –––––––––––––––––––––––––––––––––––––––––––––––––– -->   <link href="//fonts.googleapis.com/css?family=raleway:400,300,600" rel="stylesheet" type="text/css">   <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'>   <link href='https://fonts.googleapis.com/css?family=quattrocento+sans' rel='stylesheet' type='text/css'>   <link href='https://fonts.googleapis.com/css?family=montserrat' rel='stylesheet' type='text/css'>   <link href='https://fonts.googleapis.com/css?family=questrial' rel='stylesheet' type='text/css'>    <!-- css   –––––––––––––––––––––––––––––––––––––––––––––––––– -->   <link rel="stylesheet" href="css/normalize.css">   <link rel="stylesheet" href="css/skeleton.css">   <link rel="stylesheet" href="css/styles.css">    <!-- favicon   –––––––––––––––––––––––––––––––––––––––––––––––––– -->   <link rel="icon" type="image/png" href="images/favicon.ico">  </head> <body id="index_back">      <header class="head">         <div class="four columns icon">             code creative         </div>         <ul class="nav">             <li><a href="index.html">home</a>             <li><a href="about.html">about me</a>             <li><a href="index.html">classes</a>             <li><a href="index.html">contact</a>          </ul>     </header>      <div class="container">         <div class="twelve columns">             <div id="index_title">inspiring innovation</div>             <div id="index_blurb">by providing source of creative expression</div>         </div>     </div>  </body> </html> 

and css:

html, body {   margin: 0;   padding: 0;   height: 100%;   color: #ffffff; }  /*index page*/  #index_back{      background: url(../images/back.jpg) no-repeat;     background-repeat: repeat-y;     background-size: contain;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover; } 

any appreciated.

just thought, maybe should change

background-size: contain; 

to

background-size: cover; 

i mention because code has cover other settings:

#index_back{      background: url(../images/back.jpg) no-repeat;     background-repeat: repeat-y;     background-size: contain;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover; } 

so should either cover or contain, starters. mixing them up, telling 1 device 1 way, , others another.

give try , let me know if works.

cheers!


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -