Unwanted padding/margins in image over CSS background image

Question

I was experimenting with text scrolling over a limited fixed background image (not sure what it's called exactly - where it's like parallax scrolling but the background image doesn't move at all?) and everything's fine except that I'm getting a small (5-10px) margin or padding between the bottom of the "upper" image and the bottom of the background image.

The bottom margin and bottom padding are both set to 0px (I've also tried it at 0%, with no improvement). I've also tried both negative margins and negative padding, neither of which had any effect either.

I tried a simple CSS reset, which solved a separate issue with unwanted side margins, but this problem persists. (And it's the same in every browser.)

I'm sure I'm missing something very simple, but I haven't found an answer for this exact problem. Any insight is greatly appreciated.

    * 
    {
    margin: 0px;
    padding: 0px;
    }

    #text_and_image
    {
    text-align: center;
    font-family: 'Montserrat Subrayada', sans-serif;
    background: url(/images/fountain.png);
    background-attachment: fixed;
    background-size: 100%;
    padding-top: 25%;
    padding-bottom: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    }

The HTML:

<div id="text_and_image">
<p>this is the third one<br>it has both TEXT<br>and an IMAGE</p>
<img src="/images/bird_palm.png">
</div>

Answer 1

It is hard to tell without your image dimensions but I imagine the background image is being contracted or expanded due to the background-size: 100%; in the css. Set both of the images to the same width and see if the problem persists.