Нежелательная прокладка/поля в изображении поверх CSS background image

Question

Я экспериментировал с прокруткой текста по ограниченному фиксированному фоновому изображению (не уверен, что именно его называют), где это похоже на прокрутку параллакса, но фоновое изображение вообще не перемещается?) и все в порядке, за исключением того, что я получаю небольшой (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> 

Answer 1

Трудно сказать без ваших размеров изображения, но я полагаю, фоновое изображение завозится или расширен за счет background-size: 100%; в CSS. Установите оба изображения одинаковой ширины и проверьте, не исчезла ли проблема.