Html CSS背景图像上图像中不需要的填充/边距

我在一个有限的固定背景图像上进行文本滚动实验（不确定它到底叫什么-在哪里像视差滚动，但背景图像根本不移动？），一切都很好，只是在“上”的底部之间有一个小的（5-10px）边距或填充图像和背景图像的底部

底部边距和底部填充都设置为0px（我也尝试了0%，没有任何改进）。我还尝试了负边距和负填充，两者都没有任何效果

我尝试了一个简单的CSS重置，它解决了一个带有多余边距的单独问题，但这个问题仍然存在。（在每个浏览器中都是一样的。）

我肯定我遗漏了一些非常简单的东西，但我还没有找到这个问题的答案。非常感谢您的任何见解

    * 
    {
    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;
    }

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>

这是第三个
它既有文本
又有图像

如果没有图像尺寸，很难判断，但我认为背景图像正在收缩或扩展，因为

背景尺寸：100%。将两幅图像设置为相同的宽度，然后查看问题是否仍然存在。
背景图像的宽度为1039px，高度为1024px；前景图像宽1215，高499。( )