How to have an image span the entire section, with no padding or margins

I am attempting to have an image take up the entirety of a section of my homepage, then overlap it with the above section using margin-top: -20px (or something along those lines), however I am unable to determine how to make the image span the entire section to begin with. Does anyone have any ideas? Using the Banner media option doesn't achieve what I'm looking for.

Edit: The image of Dwayne "The Rock" Johnson is just an example transparent image I found off Google in order to convey my idea. All rights reserved.

Below is an image of what I've been able to accomplish so far. This method is flawed once I add my actual text into the Lorem ipsum I have in the image. Here is the code: 

<style>
  .test { padding:0px;background-color:none;position:absolute;margin-top:-150px;height:700px;width:700px;}
</style>
<img class="test"  src="https://static1.squarespace.com/static/5cb22a989b8fe830d1092c0d/t/5e12487508c15a57c853b6d8/1578256554557/transparentrock.png?format=500w">