0

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.

Bosco
  • 37
  • 1
  • 10
  • [image tags don't need a closing tag](https://stackoverflow.com/questions/23890716/why-is-the-img-tag-not-closed-in-html/23890817) and why not use a background image on the actual div rather than on an image? Also if you do not want it to move, you need to use [absolute units, not relative units](https://www.tutorialrepublic.com/css-tutorial/css-units.php) - (eg. `px` instead or `%`) – Pete Aug 19 '19 at 09:16
  • the problem is, when using `px`, the div is centered and i don't know wich width will be because of screen resolution, will erase the closing tag and will try to use a background image on the div yeas! – Bosco Aug 19 '19 at 09:22
  • are you just wanting it as an icon before the settings text? – Pete Aug 19 '19 at 09:23
  • this is actually an embelishment yeas :) the background image might work, i'm struggling with the settings to not repeat – Bosco Aug 19 '19 at 09:27
  • something like this https://jsfiddle.net/z3e7nmvs/ – Pete Aug 19 '19 at 09:28

2 Answers2

0

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>
Marc Hjorth
  • 1,797
  • 2
  • 18
  • 24
0

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>
Pete
  • 57,112
  • 28
  • 117
  • 166