我一直在关注'index.html'背景下的css,并且无法在移动设备上使用它。以下是我的索引页面:
<!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>
这是我的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;
}
任何帮助将不胜感激。
答案 0 :(得分:1)
只是一个想法,但也许你应该改变
background-size: contain;
要
background-size: cover;
我之所以提到这一点,是因为您的代码涵盖了其他设置:
#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;
}
所以他们都应该是cover
或contain
,仅限初学者。通过混合它们,你实际上是在告诉一个设备以一种方式完成它,而其他设备则是另一种方式。
尝试一下,让我知道它是否有效。
干杯!
答案 1 :(得分:0)
html {
height:100%;
background-image: url('your-image.jpg');
background-size: 100% 100%;
}
这不保持宽高比,但根据您对我的评论的回复,听起来并不重要,否则,您需要使用CSS背景属性来达到您想要的效果。< / p>