0

出于某种原因，当我向下滚动页面时，我的背景图案被切断（我将身体最小高度设置为 100%）

在此处输入图像描述

无论我有多少内容，我都希望我的图案能填满整个高度。

html,body {
  font-size: 100%;
  min-height: 100%;
  height: 100%;
  background: url(../img/bg-pattern.png);
}


body {
  padding: 0;
  margin: 0;
  font-family: "itc_avant_garde_std_bkregular", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
 }

#sparkly {
  background: url(../img/sparkly-pretty-pretty.png);
  min-height: 100%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

还有html

<body>
        <div class="row"  id="sparkly">
            <div class="large-12 columns">
                <div class="large-4 small-centered columns">
                    <img class="logo" src="img/common-code-logo-chat.png" alt="CommonCode Logo" />
                </div>
                <div class="row">
                    <div class="large-12 columns">
                        <div id="chatfield">
                        <img id"fade-out" src="" alt="" />
                            <p class="chatfield_text" id="text-opacity2"><span class="second_user" id="text-opacity1">Dan P.</span><br />Nam quis enim ut erat pharetra tristique. Aliquam erat volutpat. Pellentesque vel urna sapien. Curabitur pulvinar mauris in nisl faucibus sed lobortis erat sodales. Sed accumsan sem eu est gravida mollis. In scelerisque, ligula id pulvinar congue, dui diam imperdiet risus, in molestie est tortor condimentum quam. Praesent elit enim, vulputate a varius sed, lacinia et mauris.</p>
                            <p class="chatfield_text" id="text-opacity4"><span class="guest_user" id="text-opacity3">Guest</span><br />_Thanks, although bla bla bla bla bla bla.</p>
                            <p class="chatfield_text" id="text-opacity6"><span class="first_user" id="text-opacity5">Daryl A.</span><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus urna, lacinia sed malesuada eu, malesuada in sem. In ac eros quam, sit amet bibendum nisi. Nam in libero nibh. Nulla facilisi. Quisque eget arcu augue, tempor lobortis mi. Pellentesque bibendum turpis vitae dolor sollicitudin mattis. Phasellus libero justo, porttitor vitae fringilla id, condimentum vitae nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            <p class="chatfield_text"><span class="guest_user">Guest</span><br />_bla bla bla blabal bla bla bla bla?</p>       
                        </div>
                    </div>
                </div>
                <form method="post">
                <input type="text" name="Talk to us" placeholder="Talk to Us">
                </form>
                <div class="row">
                    <div class="large-12 columns">  
                        <p><span class="first_user"> Daryl A. </span><span class="second_user"> Dan P.</span> and <span class="more_user"> 4 more </span> are currently online </p>
                    </div>
                </div>
            </div>
        </div>
</body>

我正在使用基础框架..

希望这不会太令人困惑提前感谢任何可以帮助我的人

法比奥

4

2 回答 2

1

如下取出height: 100%;使用

html,body {
  font-size: 100%;
  min-height: 100%;
  background-image: url(../img/bg-pattern.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

height: 100%;和身高有关，所以我觉得说height: 100%;是没用的。由于背景图像有问题，您必须处理背景属性，最后两行将解决您的问题。

编辑 1

下面使用。

html,
body {
  font-size: 100%;
  background: url(../img/bg-pattern.png);
  background-repeat: repeat;
  }
于 2013-05-28T07:44:30.930 回答
1

从 normalize.css 中的 html 中删除背景颜色，它将解决您的问题

html {
    /*background: #fff;*/ /* 1 */
    color: #000; /* 2 */
    font-family: sans-serif; /* 3 */
    -ms-text-size-adjust: 100%; /* 4 */
    -webkit-text-size-adjust: 100%; /* 4 */
}
于 2013-05-28T07:52:51.623 回答