Hola quiero hacer el footer sea menos alto. Con la ayuda de Edgar Gutiérrez conseguí con este gif que me encontró. He probado varias formas y con todo no funciono, pues se perdía la parte superior del gif, lo que da su encanto. Quiero cortar el footer de la parte de abajo, sin perder la parte de arriba de la imagen. Osea, igual que esta , pero el footer mas bajo, la mitad mas o menos. Como digo, lo que probé, reduciendo imagen, reduciendo el alto de footer, me cortaba la imagen, perdiendo la parte de arriba, que es como ahora se ve.
/* Creado con la ayuda de Edgar Guiérrez*/
footer{
background-image: url(http://www.keoniworld.com/wp-content/uploads/2016/06/swaying-field-grass.gif);
background-position: center bottom;
background-size: 100% auto;
background-repeat: repeat-x;
min-height: 50vh;
}
footer {
text-align: center;
padding: 50px 0 30px ;
}
footer p {
color: #f8f8f8;
font-size: 14px;
}
footer a.totop {
color: #fff;
margin-bottom: 30px;
}
footer a.totop:focus {
outline: 0;
}
<title>document</title>
</head>
<body>
<ul>
<li class="active">
<a href="#intro">Casa</a>
</li>
<li>
<a href="#about">Sobre mi</a>
</li>
<li>
<a href="#service">Servicios</a>
</li>
<li>
<a href="#works">Trabajos</a>
</li>
<li>
<a href="#contact">Contacto</a>
</li>
</ul>
<h2 >Hola</h2>
<div class="container">
<div class="row">
<div class="text-center">
<p>
Lorem ipsum dolor sit amet, vis tale malis tacimates et, graece doctus omnesque ne est, deserunt pertinacia ne nam. Pro eu
simul affert referrentur, natum mutat erroribus te his
</p>
<p>
Ne mundi fabulas corrumpit vim, nulla vivendum conceptam eu nam. Ius ex principes complectitur, ex quo duis suscipit. Ius
fastidii reprimique no. Sadipscing appellantur pri ad. Oratio moderatius definitiones cum ex,
mea ne brute vivendum percipitur.
</p>
<a href="#service" class="btn btn-skin btn-scroll">What we do</a>
</div>
</div>
</div>
</div>
</section>
<div class="section-heading text-center">
<h2 class="h-bold">hola</h2>
<h5>Web Design</h5>
<p>
Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
</p>
<h5>Web Design</h5>
<p>
Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
</p>
<p>
Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
</p>
<h5>Graphic design</h5>
<p>
Ad denique euripidis signiferumque vim, iusto admodum quo cu. No tritani neglegentur mediocritatem duo.
</p>
</section>
<footer>
<a href="#">Adios</a> Email</p>
</footer>
</body>
</html>