Repeatable background creates gap on top - html

Question

This is the result I am getting, I made the middle part of the background repeatable so when I add text it stretches vertically, but for some reason when I add text it creates a gap between the top part and the middle part.
.resumetop {
background: no-repeat;
width: 1178px;
height: 30px;
background-image: url("images/resume_top.jpg");
}
.resumemiddle {
background: no-repeat;
width: 1178px;
height: 100%;
background-image: url("images/resume_middle.jpg");
}
.resumebottom {
background: no-repeat;
background-image: url("images/resume_bottom.jpg");
width: 1178px;
height: 38px;
}
<div class="resumetop">
</div>
<div class="resumemiddle">
<p class="resumetext">
dksjfgjhsfguysdg
</p>
</div>
<div class="resumebottom">
</div>
Any help is appreciated.

Answer 1

It's caused by your p tags.
Either try:
p {
margin: 0;
}
Or if you want to avoid such problems completely, try:
*{
margin: 0;
padding: 0;
}
This takes away all default margins and paddings.
Ps. please next time, add an img url that works for everyone, not something that's stored locally.
p {
background-color: red;
margin: 0;
width: 150px;
}
.resumetop {
background: no-repeat;
width: 1178px;
height: 30px;
background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
}
.resumemiddle {
background: no-repeat;
width: 1178px;
height: 100%;
background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
}
.resumebottom {
background: no-repeat;
background-image: url("https://c402277.ssl.cf1.rackcdn.com/photos/11551/images/hero_full/Bernard_de_wetter_wwf_canon_113974.jpg?1462218465");
width: 1178px;
height: 38px;
}
<div class="resumetop">
</div>
<div class="resumemiddle">
<p class="resumetext">
dksjfgjhsfguysdg
</p>
</div>
<div class="resumebottom">
</div>