Question

我希望此网站在移动设备上正确显示。

这是网站：Test

这就是它在移动设备上的显示方式：Mobile image

这是我的代码：

的CSS：

  #storia{
   padding: 20px 0px 20px 0px;
   text-align:center;  
   line-height: 1.2em;
   background:url(img/homeback2.png) no-repeat;
   background-position: center center;
   height:700px;
  }

  #storiatesto1{
   margin:0 auto;
   margin-top: 15px;
   width: 530px;
   font-family: 'Courgette', serif;
   font-size:14px;
  }

   #storiatesto2{
   margin:0 auto;
   width:450px;
   font-family: 'Courgette', serif;
   font-size:14px;
  }

#doc { margin: 10px 0; }
#content {
    margin: 0 auto;
    margin-top: 75px; border: solid 1px #CCC; padding:7px; background:white;
    width:530px;
}

.blueberry { max-width: 960px; }
.blueberry img { width:100%; }

HTML：

<body>

<div id="storia">

<div id="doc">
  <div id="content">

<!-- blueberry -->

<div class="blueberry">
  <img src="home.jpg" />
</div>

<!-- blueberry -->

  </div>
</div>

<div id="storiatesto1">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>


<div id="storiatesto2">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>



</div>

    </body>

Answer 1

因为您已修复宽度，背景图像将根据该宽度居中。尝试


    #storiatesto1{
       margin:0 auto;
       margin-top: 15px;
       width: 80%;
       font-family: 'Courgette', serif;
       font-size:14px;
      }
    #storiatesto2{
       margin:0 auto;
       width:80%;
       font-family: 'Courgette', serif;
       font-size:14px;
      }

同时为容器提供背景大小，例如


      #storia{
       padding: 20px 0px 20px 0px;
       text-align:center;  
       line-height: 1.2em;
       background:url(img/homeback2.png) no-repeat;
       background-position: center center;
       height:700px;
       background-size:100% auto
      }

为什么背景不在这里？

1 个答案: