Фоновое изображение не растягивается до нижней части страницы: нельзя использовать background-attachment - PullRequest
Новая
       22

Фоновое изображение не растягивается до нижней части страницы: нельзя использовать background-attachment

0 голосов
/ 21 июня 2019

Я работаю над проектом с фоновым изображением, которое должно полностью покрывать всю страницу.Я не могу использовать свойство "background-attachment: cover", потому что эту страницу также нужно просматривать на iOS, которая не поддерживает background-attachment. 

.sky-background {
  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* cannot use this property */
  /* background-attachment:fixed; */
}
<body class="sky-background">
</body>

Я искал альтернативы для iOS, но пока не нашел ничего удовлетворительного.Кто-нибудь может предложить какие-нибудь указатели?

Ответы [ 4 ]

0 голосов
/ 21 июня 2019

Только добавив высоту на вашем теле элемент будет делать эту работу.Используйте высоту: 100vh;на .sky-фоне.Надеюсь, это поможет 

.sky-background {
  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body class="sky-background">
</body>
</html>
0 голосов
/ 21 июня 2019

Это связано с высотой документа.Попробуйте body {min-height: 100vh;} или лучше html {100%};.

0 голосов
/ 21 июня 2019

Используйте это, надеюсь, это поможет вам. 

<!DOCTYPE html>
<html>
<head>
<style> 
	html {
		height: 100%;
	}
	body {
	  background-image: url("https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
	  background-position: center;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-color: #cccccc;
	}
</style>
</head>
<body>
	<h1>The background-image Property</h1>
	<p>Hello World!</p>
</body>
</html>
0 голосов
/ 21 июня 2019

Вы можете попробовать это. 

html {
  height: 100%;
}

body.sky-background {
  height: 100%;
}
...