图像下方有很多空白

Question

I am trying to use an image as a background (I did this before I knew there was a background attribute in HTML itself) and for some reason it has a LOT of whitespace below it.

I tried removing the image completely so that I can use the "background" function in HTML, but as soon as I remove the image, all the information (except the image in the middle) disappears!

If I put the image in (in HTML) with no CSS, then it appears below all the text on the site, and it seems that the space it takes up (before I move it up) is the whitespace when it is moved.

I've been looking for a long time and can't find a solution.

HTML

 <div class="Images">

    <img id="MalcomPic" src="../Assets/Malcom.jpg" alt="Malcom X"/>

    <img id="MalcomBack" src="../Assets/MalcomBacks.jpg" alt="Malcom X"/>
    </div>

CSS

   #MalcomBack {
   position: relative;
   bottom: 707px;
   z-index: -1;
    }

I tried adding display: block to the image, but it doesn't do anything.

Here is what it currently looks like: http://imgur.com/a/evyMl

I want it to end at the bottom of the picture. Thanks for any help

Answer 1

I think the problem is that the outer div is not big enough. The image cuts right after the text because that's where the outer div ends. (A div with relative position doesn't affect the size of the parent)

try adding the following to the outer div:

position: absolute;
height: 100%;
top: 0;