在移动设备上扩展背景图像以适合身体

Question

我有5个div，负责网站的背景。 当用户将指针悬停在动作div之一上时，背景会改变。 在桌面背景图片上可以完美显示，但是在移动浏览器中，我的屏幕截图上有类似图片的图片

我有这个CSS

.page_background
{
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   min-width: 100%;
   min-height: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#bg_def
{
    background: url("/images/bg.jpg") fixed top !important;
}
#bg_kvadro
{
    background: url("/images/bg_kvadr.jpg") fixed top !important;
    display: none;
}

#bg_hotel
{
    background: url("/images/bg_hotel.jpg") fixed top !important;
    display: none;
}

#bg_palatka
{
    background: url("/images/bg_base.jpg") fixed top !important;
    display: none;
}

#bg_eat
{
    background: url("/images/bg_rest.jpg") fixed top !important;
    display: none;
}

html代码的一部分

<body>

<div class="page_background" id="bg_def"></div>
<div class="page_background" id="bg_hotel"></div>   
<div class="page_background" id="bg_eat"></div> 
<div class="page_background" id="bg_palatka"></div> 
<div class="page_background" id="bg_kvadro"></div>  

我的问题是：如何扩展图像以适合身体？

Answer 1

将图像定义为子图像，而不是背景图像。