Moving scroll box down to text box area?

I made a simple layout, but it’s been years since I’ve coded and I’m having trouble positioning and moving the scroll box to align with the text box area I created on this image.

This is the coding I have so far. Definitely missing something…

<center>
<div class="img">
    <div class="scroll">
      <a>
         text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here          text here text here text here text here 
      </a>
    </div>
</div>
<style>
   .img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
}


.scroll{
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a{
position: relative;
bottom: -400px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}
</style></center>

Okay, I’m a bit unclear still, but here’s what I have:

.img{
  background-image: url(http://i65.tinypic.com/4janew.jpg);
  background-size: 100% 100%;
  width: 930px;
  height: 634px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
    position: relative;
}


.scroll{
    position: relative;
  height: 50%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;
}

.scroll a {
    position: absolute;
    left: 100px;
    right: 100px;
    bottom: 250px;
  font-size: 14px;
  color: #BBA894;
  font-family: Times New Roman;
}

Since the image contains the box, what you’ll need to do is center the text inside like I’ve done at:

https://jsfiddle.net/L2saoou8/

If you want it to scroll, then just add a height to the containing box of your text, .scroll and then overflow: auto.

Not sure if this is what you wanted but try adding

padding-top: 30%;

to your CSS for .scroll {}.

So make it look like this:

.scroll {
height: 50%;
width: 100%;
overflow-y: auto;
padding-right: 25%;
padding-top: 30%;
}

Though I do not recommend this way because this is not responsive design. Having a background image like that with text specific to areas will not respond well across platforms such as going from desktop to tablet to mobile etc. I recommend you remove that rectangle box from the image and do it as a div with a background color of that box’s color with transparency in it and placing it on the image like that with the scroll div inside of that div. Thanks! Hope it helped.