1

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>

2
  • 1
    Tienes errores en el HTML. Hay varias etiquetas que tienen etiqueta de cierra pero no de apertura, unos div sobrantes.
    – Alvarez
    Commented el 20 feb. 2018 a las 17:23
  • Es posible, ya lo he corregido
    – gemita
    Commented el 20 feb. 2018 a las 17:46

2 respuestas 2

1

Para cambiar el tamaño del footer sin que se vea cortada la imagen debes ajustar la propiedad de background-size modificando el alto como en el ejemplo que cambio el auto a un 85%(esta propiedad puede variar como gustes) y también modificar la propiedad padding reduciéndola para que no sea tan alto el footer.

footer{ 
    height:50px;
	background-image: url(http://www.keoniworld.com/wp-content/uploads/2016/06/swaying-field-grass.gif);
  	  background-position: center bottom;
	  background-size: 100% 85%;
	  background-repeat: repeat-x;
	  min-height: 50vh;
  }
  
  footer {
	text-align: center;
	padding: 40px 0 20px ;
	
}

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>

3
  • Perfecto, @berclyn Carlosviza, ya veo que puedo modificar el alto con el segundo porcentaje. Solo hay un problema, los elementos que tengo en el footer se quedan fuera de este
    – gemita
    Commented el 20 feb. 2018 a las 22:11
  • 1
    ¿A que elemento te refieres exactamente?.Si es el texto de "Adios Email" ¿ Como quieres que se vea ? porque en la pregunta este no esta centrado verticalmente. Commented el 22 feb. 2018 a las 14:59
  • Si, a eso me referia
    – gemita
    Commented el 22 feb. 2018 a las 15:47
0

Podrías usar background-size: cover; y background-position: center top (o center)

footer{
  background-position: center center;
  background-size: cover;
  min-height: 15vh;

}

4
  • Gracias @Jandro Oliva voy a probar y te cuento.
    – gemita
    Commented el 20 feb. 2018 a las 16:50
  • Ya probé y no funciona, le corta también de la parte de arriba...
    – gemita
    Commented el 20 feb. 2018 a las 17:10
  • 1
    ¿Probaste con "background-position: center top"? Commented el 20 feb. 2018 a las 17:12
  • Si @Jandro Oliva, pero lo que hace es bajar la imagen demasiado, osea deja mucho espacio blanco de la imagen. Lo suyo es que quedara como esta en el ejemplo, pero con menos altura. Gracias.
    – gemita
    Commented el 20 feb. 2018 a las 17:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.