我正在嘗試創建一個具有fullpage背景圖片的網站。我已經得到它在桌面版本上的工作,但是當我將它推到github
並在手機上查看時,背景圖像只是頂部的一個長圖像。我在我的css
中使用background-size: cover
。下面的屏幕截圖。 如何在移動設備上佔用整個空間?謝謝:)背景封面不能在移動設備上工作
.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>
嗨,我試過上面的例子,但我的網站中的一些其他功能停止工作。我的網站使用javascript wheel事件循環播放全尺寸的背景圖片,並且它對我改變的某些東西感到憤怒,我不知道爲什麼。無論如何,在body標籤中,類將被交換到css中的不同圖像。告訴我更多關於最小高度和最大高度的信息。 –
住在GitHub這裏http://francinejones.github.io/ –
它工作正常,如果只有與我的HTML和CSS。由於某種原因,我認爲腳本輪功能可能無法正常工作。可能是格式的cos。這是關於最小高度和最大高度。 http://www.w3schools.com/cssref/pr_dim_max-height.asp http://www.w3schools.com/cssref/pr_dim_min-height.asp –