Moving an image up in CSS - html

Question

So, for the past hour I've being trying to move this image using the css property position. My problem is every time I move it using top or bottom it doesn't work correctly. Here's a screenshot of it before using said properties and after. Below you can find my html & css. Lastly, this position has to be absolute or the image completely disappears.
HTML
<section class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>What others have to say...</h3></header>
#foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p>{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
</div>
<div class="interaction">
|
Dislike
#if(Auth::user() == $post->user)
|
Edit |
Delete
#endif
</div>
</article>
#endforeach
</div>
</section>
CSS
.heart{
background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
background-position: left;
background-repeat: no-repeat;
height: 50px; width: 50px;
cursor: pointer;
position: absolute;
left: 12px;
bottom: 5px; //This or 'top' is what causes my entire problem
background-size:1450px;
}
.heart:hover {
background-position: right;
}

Answer 1

How about adding this :
.interaction {
position: relative;
}

Answer 2

I think you should put the no-repeat at the same line as the background
It just work for me,i don't know why
https://jsfiddle.net/moongod101/2wh6b9rq/