How to give my style to the footer, with an image ...?

Question

How to give my style to the footer, with an image ...?

Navigation

#1 by (2 votes)

0

Hello, I am trying to give the style to my footer, of the image that I show giving the sensation of realism, as if the grass grew upwards. I thought that it would give impression of movement like a git, I do not know if that will be possible, with javascript or bootstrap. Or I must put a background image or git. I have looked for some clue as to how to give that appearance, or another similar one without achieving it. Any idea how I can get it? Thanks.

footer {
    background-color: #404040;
}

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 09.02.2018 в 20:11

source

1 answer

Sentence for an inner join to two fields in a table Table nested in html

score 2 · Answer 1

I think you mean a GIF , instead of GIT , if I understood correctly, you should only add it to the footer as a background only using CSS, like this:

.pie_pagina
{
   background-image: url(pasto-animacion.gif);
   /*Estos estilos te los recomiendo*/
   background-position: center bottom; /*Para que la imagen aparezca desde abajo*/
   background-size: auto 100px; /*o las medidas que quieras darle a la imagen*/
   background-repeat: repeat-x; /*Para que solo se repita a los lados y no hacia arriba*/  
}

Now, a gif is somewhat heavy and above all if it is very realistic, I recommend you look for a compressor or a flatter style because it weighs less. It can also be good that if you're going to do it yourself (the gif), you'll do better using sprites.

I give you a quick example of how you can do it. (If the image takes longer to load, you know why it is)

footer{
  background-image: 
    url('https://static1.squarespace.com/static/55b6470ae4b022e9ea88408d/t/561d64c1e4b09810cb5dbbae/1444766985860/CROP-Grass.gif?format=2500w');
    background-position: 50% 25vh;
    background-color: lightgray;
    /*La siguiente medida es porque no encontre una imagen como la que quieres tu*/
    background-size: 50% auto;
    background-repeat: repeat-x;
    min-height: 50vh;
}




/*Esto lo puedes ignorar*/
*{
margin: 0; padding: 0;
}
body{
min-height: 100vh;
display:flex;
align-items: flex-end;
}
footer{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-family: verdana;
font-weight: bold;
}

<footer>

MIRA MI GIF DE HIERBAS

</footer>