У меня есть фоновое изображение с чашкой кофе (скажем, кружком) в центре, но чашка имеет смещение в 100 пикселей вниз.Поэтому я хочу переместить фон примерно на 100 пикселей вверх, где фон покрывает всю страницу.Но когда я двигаю фон, снизу появляется пустое пространство (хотя оно кажется меньше 100 пикселей).Я прочитал это Q / A , но это ничего не говорит об этом пробеле:
Мое текущее решение (я использую смещение 250 пикселей для увеличения проблемы):
html,body{
height:100%
}
body{
background-image:url('http://www.sheikhpour.com/coffee/coffee.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:50% calc(50% - 250px);
}
Редактировать: без использования calc
и с чистым процентом, например background-position:50% 60%
, все работает отлично в Chrome.Я должен преодолеть проблему calc