CODEWITHSUNDEEP
htmlcss
Fabio Vella
Fabio Vella

Reputation: 434

Background cuts when scroll down

for some reason my background pattern get cut off when i scroll my page down (i set the body min-height to 100%)

enter image description here

I would like my pattern to fill the all height no matter how much content I have.

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;
}

also the 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>

I am using Foundation framework..

hope it is not too confusing thanks in advance to anyone who could help me

fabio

Upvotes: 0

Views: 1455

Answers (2)

Fahim Parkar
Fahim Parkar

Reputation: 31647

Take out height: 100%; and use as below

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%; is related to body height, so I think saying height: 100%; is useless. As background image was problem, you have to deal with background properties and last two lines will solve your problem.

Edit 1

Use below.

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

Upvotes: 1

Roy Sonasish
Roy Sonasish

Reputation: 4599

remove the background color from the html in normalize.css, it will solve your issue

html {
    /*background: #fff;*/ /* 1 */
    color: #000; /* 2 */
    font-family: sans-serif; /* 3 */
    -ms-text-size-adjust: 100%; /* 4 */
    -webkit-text-size-adjust: 100%; /* 4 */
}

Upvotes: 1

Related Questions