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
Post a Comment