Image overlay on html - html

Question

So I want to add a new part of a website. well its hard to explain... So look at this.
CSS:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-side-open{
left:0px;
}
.menu{
overflow-x: hidden;
position: relative;
left: 0px;
}
.menu-open {
left:231px;
}
.menu, .menu-side{
transition: 900ms;
}
.bar {
height: 7px;
width: 25px;
background-color: black;
margin: 2px;
border-radius: 20px;
}
.listing{
text-align: center;
}
.list {
padding: 2px;
color: white;
text-decoration: none;
width: 233px;
}
.list img{
position: absolute;
}
.box:hover {
background-color: gray;
}
body {
background-image: url('download.jpeg')
}
Html:
<header>
<a href="#" class="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
<nav class="menu-side">
<div class="listing">
<div class="box"><a class="list" href="/"><h1>Home</h1></a> </div>
<div class="box"><a class="list" href="/Photos/"><h1>Photos</h1></a></div>
<div class="box"><a class="list" href="/Store/"><img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHEgkUBwgWFgkVFxcbGRgYGSMWHBAeGiQYIiUWHyQfHyosJCYxJxwXIzQtKywsLjEuGCs/OjMsOSg3OjcBCgoKDg0OGxAQGy8kHSQ3LDI3LysvLiwsLi0uNyw0NS83NCw0NCwrNTIsLSwsLDQ0LDQtNCwsLC8yLDctLCwsN//AABEIAEEAQAMBEQACEQEDEQH/xAAcAAEBAQACAwEAAAAAAAAAAAAABwYBCAIDBQT/xAA2EAABAwIBCQQIBwAAAAAAAAABAAIDBBEFBgcSEyExQWFiFEJRsSIjMkORocHRJDVxdIGz4f/EABsBAQACAwEBAAAAAAAAAAAAAAAFBgEDBAcC/8QALhEAAQMDAgUDAwQDAAAAAAAAAAECAwQFERIhIjFBUWFxscFCoeFSgdHwEyMy/9oADAMBAAIRAxEAPwD1VebauweGR9RJFKxnCNzi4Dxs5gvb4qLnpFRNTS6W29xvckMm3ZV9jMArgLKeQK+QeQKGSnZvsttLV02MS+lujkPHpd9CpKkqvoeVK9WbGZ4E9U+UKWpMqQQBAEBLc4eQ2r1lTgsXo75Ixw62/UKNqqX62Fus15ziCdfRfhSaAqOLWarJTJft7opMWvHh+k0C+wzk7mN+66qelV65dyIW53ZtO3RFu/28qfgxbDCJMQkw+kcMOjkLdLeGW2Wv+q1TRYcqtTZDso6tHRxtlcn+RyZx3N1m+y21urpsYl9Zujee90nmuykqs8Dyv3qzaczwJt1T5KQpIqgQBACL79yAlecPIfVaypweL1e+SMcOofZRtVS442Fvs15ziCZd+i/Blcmsa1NTh7sarXmjh0tEG7tXcHd/q1wTq57UeuyHdcKBrYJHQM43YyaOso5co4o3x1nZ8OcbQwjSOs0jbWSaPieJ2bV0va6VvAuG+5EwzQ0U3+1qvkTmv6fCeiGHqYHUj3tmaRI0kfDiFEOarVwpcI5GyNRzeSlNzfZbdo1dPjEvrtzHnv8ASefmpOkqs8DypXqzaMzwJt1Tt5KMpEqoQBAcEXvcbEBKs4eQ/Z9ZU4PF6re9g7vUFGVVLjjaXCzXjViCZd+i/BlMNyhkibSRsIbURnRin0rGFryLtcLWc3jt8F8xVOERvX7HZV2tr5HyKvAu6p1ynZTU5R4ZFXtl1dbpmnY2ONsY03Svdtu4+J2m3ALfUQI5M55e5FWyvdE9G6dnrlVXZERO398GHqqKWhfIyqgc2dli4cWczbdwUW6NzVwpbop45Wo5ioqL9ymZvst+1aumxiT8RuY8+86Tz81JUlVq4Hcyp3qzaMzwJt1Tt59CiKQKsEAQHBGlcOGxAi4JPnDyH7IZKjCIrwHa9g7nUOSjKqmxxNLjZrxrRIJl36L38GTwbG6inYymw2pbHG9/tWDS0usPa4Baoah6Joam69SQrbdTvetRLnDU5J4PfXYuKaJ1PQXL3gdoledN8zh3AT3Ad3iszTI1unm5ea/BrpKJ0kqTO4WNzoanL1X1Pitda1jt8lwk6dmFZTyUIAgCA4c3SBDhcH5oZRcboSTOHkP2IyVGExXpTtewdzqHJRlTTaeNhcrPeElRIJl36L38E+by3KPUsp5Ar5MnZtWU8mCAIAgCA4c0PBDhdp+aGUVUXKEhzhZEHDTJUYTHejO17B7rqHLyUXVU2nibyLpZrwkyJDMvF0Xv+TAgrgLIdnVYzyYIAgCAIAgOHNDwQ8Xad4PFDKKqLlCDZycMiwGubFRbI5YxIG8GkueC0cvRv/KiKqn0LlvIvVmua1EeiX/pNs9/yXpS5RAgCAIAgCAICDZ+fzHD/wBuz+yVc05N2rl+/wDB/9k='><h1>Store</h1></a></div>
</div>
</nav>
</header>
Sorry about the long img src, well ive looked aroung and i found one thing but it didnt work for me. But what i am trying to accomplish is the image in the top right corner. so it would be like an actual banner. I did the position: absolute; but Is there something else? Should i Move the img tag?