Daniel Lee February 2016

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
  ––––––––––––––––––––––––––        

Answers


Thomas Kroll February 2016

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!


Brett84c February 2016

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.

Post Status

Asked in February 2016
Viewed 2,530 times
Voted 11
Answered 2 times

Search




Leave an answer