AndrewLeonardi AndrewLeonardi - 3 months ago 7
Javascript Question

Contain Text within Picture area using Position: relative;

I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.

When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.

Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?

Thanks!

Here's my JsFiddle

HTML:

<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>


<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>


CSS:

.center{
display: table; margin: 0 auto;
}

body{
background-color: #27ae60;
}




.image {
position: relative;
width: 100%; /* for IE 6 */
}

.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}

.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}

Answer
  1. First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.

  2. The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.

  3. The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.

A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Good luck!

You can get the desired effect in a much simpler code.. have a look:

body {
  background-color: #27ae60;
}

.desk {
  position: relative;
  background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
  width:560px;
  height:839px;
  margin: 0 auto;
}

.header { 
   padding: .5rem 0 0 2rem;
   font-size: 2.5rem;
   font-family: 'Just Me Again Down Here', cursive;
}

.answer { 
   width: 100%;
   margin-left: 2rem;
   outline: none;
   border: none;
   background-color: transparent;
   overflow: hidden;
   resize: none;
   font-size: 2rem;
   font-family: 'Just Me Again Down Here', cursive;
}

Fiddle: https://jsfiddle.net/y3h1ogms/5/