How to put a transparent image over a div without affecting the layout of the page?

Question

How do I put a transparent png image over a DIV without it affect anything else in the HTML document? I would do position absolute because it takes it out of the "normal flow of the document" but I have the whole website centered using "margin-left: auto;" and "margin-right: auto;"

Answer 1

if you apply position: relative to the div you want to cover then position: absolute on the image will be calculated relative to the covered div rather than the whole page, if it is a child element. i.e.

<div id="tobecoverd">
    <p>your content...</p>
    <img src="./img/transparent.png" class="cover" />
</div>

div#tobecovered{
    position: relative;
}
div#tobecovered img.cover{
    position: absolute;
    /* position in top left of #tobecovered */
    top: 0; /* top of #tobecovered */
    left: 0; /* left of #tobecovered */
}

Answer 2

Here's how it works. The example shows a transparent image absolutely positioned over another image, creating a mask.

Check working example at http://jsfiddle.net/39VG9/1/

Answer 3

Other solution is to use after like this:

.image:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(https://i.imgur.com/DDdKwlk.png) no-repeat 0 0;
    background-size: cover;
}

:)