CODEWITHSUNDEEP
htmlcssmobilebackgroundstretch
Daniel Lee
Daniel Lee

Reputation: 3

CSS: Background not stretching on mobile devices

I've been kicking around my css for the background on 'index.html' for a while and can't get it to stretch on mobile devices. The following is my 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 A Source Of Creative Expression</div>
        </div>
    </div>

</body>
</html>

and this is my 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 help will be appreciated.

Upvotes: 0

Views: 1847

Answers (2)

HaulinOats
HaulinOats

Reputation: 3878

html {
  height:100%;
  background-image: url('your-image.jpg');
  background-size: 100% 100%;
}

This does NOT maintain aspect ratio but based on your response to my comment, it doesn't sound like that mattered to you, otherwise, you'll need to play with the CSS background properties to achieve exactly what you want.

Upvotes: 0

Thomas Kroll
Thomas Kroll

Reputation: 197

Just a thought, but maybe you should change the 

background-size: contain;

To

background-size: cover;

I mention this because your code has cover for the 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 they all should either be cover or contain, just for starters. By mixing them up, you are essentially telling one device to do it one way, and the others to do it another.

Give that a try and let me know if it works.

Cheers!

Upvotes: 1

Related Questions