While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upper image and the bottom of the background image.
Even though both the bottom margin and padding are set to 0px (I also tried using 0%), the problem persists. Attempts at using negative margins and padding did not solve it either.
I attempted a CSS reset, which resolved another problem related to side margins, but this particular issue remained. It appears across all browsers.
I believe there's a simple solution that I'm overlooking, as I haven't found a precise answer for this problem yet. Any help on this would be highly 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>