html - Limit background image to body only -

-

i have background when make footer background image of body spans footer; how can limit background body? here code:

body {    font-family: 'open sans', sans-serif;    background: #282828;    color: #fff;    padding-top: 20px;    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff7f50, #23a6d5, #ff7f50);    background-size: 400% 100%;    background-repeat: no-repeat;    -webkit-animation: gradient 15s ease infinite;    -moz-animation: gradient 15s ease infinite;    animation: gradient 15s ease infinite;  }
<div class="footer">    <p>posted by: asds</p>    <p>contact information: <a href="mailto:someone@example.com">       someone@example.com</a>.</p>  </div>

just give footer background color. <body> defaults white try adding

.footer {   background: #ffffff; }

of course, you'll notice in example below background again @ bottom , edges. can, apad1 mentioned, change html structure, or remove default margin <body> , adjust footer more

body {    font-family: 'open sans', sans-serif;    background: #282828;    color: #fff;    padding-top: 20px;    background: linear-gradient(-45deg, #ee7752, #e73c7e, #ff7f50, #23a6d5, #ff7f50);    background-size: 400% 100%;    background-repeat: no-repeat;    -webkit-animation: gradient 15s ease infinite;    -moz-animation: gradient 15s ease infinite;    animation: gradient 15s ease infinite;  }    .footer {    background: #ffffff;  }
<div class="footer">    <p>posted by: asds</p>    <p>contact information: <a href="mailto:someone@example.com">       someone@example.com</a>.</p>  </div>


Comments

Post a Comment