背景封面不适用于移动设备
Fra*_*nes 4 css mobile background-image responsive-design responsive-images
我正在尝试创建一个具有全页背景图像的网站.我已经将它用于桌面版本,但当我将其推送到github手机上并在手机上查看时,背景图像只是顶部的长图像.我正在使用background-size: cover我的css.屏幕截图如下.我如何在移动设备上实现它占用整个空间？谢谢 :)
桌面版:
手机版:
.background1
{
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewpoint so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image
rescale based on itscontainer's size */
background-size: cover;
/* Pick a solid background color that will
be displayed while the background image is loading */
background-color:#464646;
}
Html如下
<head>
<script src="https:
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script>
<script
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
</head>
<meta charset="utf-8">
<title>Color</title>
<link rel="stylesheet" href="style.css">
<link href="animate.css" rel="stylesheet">
</header>
<body id="bodyID" class="background1">
</body>
<script src="javascript.js"></script>
问题源于您的<body>元素没有高度适合您的设备.你可以坚持一个height: 100%上html, body,但我认为更简单的方法来做到这一点是添加以下内容:
body {
height: 100vh;
}
这会将body元素的高度设置为加载时视口高度的100%.我测试了它,它解决了我的Android设备上的问题,并没有在桌面上破坏它.
附注:您可以按照Google的说明使用Chrome检查工具调试Android设备.
您是否定义了最小高度或最大高度或高度？也许你可以分享 Html 代码让我检查一下。对于背景 css，这里有更有用的代码。
background: #464646 url(images/background-photo.jpg) no-repeat center center;
background-size: cover;