Image fixed position on a text div regardless resolutions - html

Question

I'm actually trying to fix an image to a div with text on it regardless of the screen resolution the user may have.
So the image doesn't move and stays fixed in that div.. forever
On Html:
<div class="config">
<img id="uC1"></img>
<div class="config-title">Settings</div>
</div>
On Css:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative; }
#uC1 {
background-image: url(/images/tinta2.png);
width: 32px;
height: 23px;
position: absolute;
top: 5%;
left: 60%; }
The problem is, when neither using % nor px on top and left, other screen resolutions moves the image.
I've already tried to play with the #media (min-width: 575px) {} options and thats working but then will need to fix the position in all the widths, and maybe there's a better and much simple solution that i don't know
I'm aware that creating an image with the div's content plus image will do the thing but i want to be able to change the text eventually
And sorry if i type like yoda, but remember:
In a dark place we find ourselves, and a little more knowledge lights our way.

Answer 1

From the comments, it looks like you are just wanting your icon before your text. In this case, I would use a pseudo element before the actual text:
.config-title {
transform: rotate(-10deg);
text-align: center;
margin: 20px 0px 0px 0px;
position: relative;
line-height: 23px; /* same height as your image (unless your font size is larger, then make it the same size as your font */
}
.config-title:before { /* this will place a pseudo element at the beginning of the config title div */
content: '';
display: inline-block; /* make it inline block so it appears before the element and is centred with it */
background: url(/images/tinta2.png) top left no-repeat;
background-size: contain;
width: 32px;
height: 23px;
margin-right: 10px; /* spacing to your text */
vertical-align: middle;
}
<div class="config">
<div class="config-title">Settings</div>
</div>

Answer 2

If I understand the question correctly, you can achieve this with the position attribute.
position: absolute will be positioned relatively to the container div with position: relative. If you want to place in the top left corner, you can use top: 0; left: 0.
Working JSFiddle
.container {
position: relative;
display: inline-block;
margin: 15px;
height: 200px;
width: 200px;
border: 2px solid red;
}
.container--image {
position: absolute;
left: 0;
top: 0;
}
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>
<div class="container">
<img src="https://placekitten.com/g/50/50" class="container--image">
<p>Content</p>
</div>