place image by after (css) that the footer is on top

Question

place image by after (css) that the footer is on top

Navigation

#1 by (1 votes)

1

How do I place an image in such a way that the footer is on top of the image?

this is the css code that I have

body::after{
    content: '';
    position: absolute;
    background: url(../img/sheet_b.png) no-repeat;
    width: 100%;
    height: 60%;
}

html css bootstrap

asked by crt 28.04.2018 в 05:52

source

1 answer

Improve this script (linting). Function statements should not be placed in blocks Search for registration in Web Service Java

score 1 · Answer 1

You can do it with z-index:

The value of z-index indicates the depth position (layer) of an object on the page. Elements with positive values are stacked on top of one with negative, minor, or unspecified values. Two objects with the same z-index are organized depending on the placement of their labels. A negative value places the object under another one that does not have it defined. To remove the effect, remove or change the parameter to null.

Note: The z-index property only applies to elements that have the   property position in absolute or relative.

Fragment obtained from cristalab .

Here is a working example, I hope you help, greetings.

.footer{
  z-index:1;
  background-color: blue;
}

.imagen{
  z-index:-1;
  position: absolute;
  margin-top: -70px;
}

<img class="imagen" src="https://cdn.pixabay.com/photo/2016/04/02/09/43/apple-1302430_960_720.jpg">

<div class="footer">
  <h1>Este es el footer<h1><br>
</div>