How to reduce the footer from the bottom?

Question

How to reduce the footer from the bottom?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hi, I want to make the footer be less high. With the help of Edgar Gutiérrez I got with this gif that found me. I have tried several ways and yet it did not work, because the upper part of the gif was lost, which gives it its charm. I want to cut the footer from the bottom, without losing the top part of the image. I mean, just like this, but the lowest footer, half more or less. As I say, what I tried, reducing image, reducing the height of footer, I cut the image, losing the top part, which is how it looks now.

/* 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>

html css bootstrap

asked by gemita 20.02.2018 в 17:06

source

2 answers

pass the value of a select to another select Insert in 2 different laravel tables?

score 1 · Answer 1

To change the size of the footer without it being cut the image you must adjust the property of background-size modifying the height as in the example that changed the auto to a 85% (this property can vary as you like) and also modify the padding property by reducing it so that the footer is not so high.

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>

score 0 · Answer 2

0

You could use background-size: cover; and background-position: center top (or center)

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

}

answered by 20.02.2018 в 17:33