Я пытаюсь использовать 100vh, чтобы у background-image всегда была высота, соответствующая размеру экрана. То, что я хочу сделать, это использовать одно и то же изображение для каждого видового экрана и позволить overflow: hidden сделать из-за ширины доступа. По сути, сужение изображения более вертикально. Однако моя попытка не работает. background-image не адаптируется к 100vh.

Кто-нибудь видит, что я делаю не так?

#home-cover1 {
	background-image: url("/images/home-cover1.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    width: 100%;
	position: relative;
}
#home-cover1-wrap {
	background-color: rgba(0,0,0,0.3);
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
<div id="home-cover1">
  <div id="home-cover1-wrap">
  </div>
</div>
0
Paul 25 Апр 2017 в 06:44

2 ответа

Лучший ответ

Изменить CSS Я думаю, background-size: cover; лучший

#home-cover1 {
    background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
    position: relative;
}
4
chirag solanki 25 Апр 2017 в 03:48

Вашему # home-cover1 background-size не хватает 100% высоты, замените background-size: 100%; на background-size: 100% 100%;

0
Key Shang 25 Апр 2017 в 03:54