Aster Nyxx Aster Nyxx - 8 days ago 4
CSS Question

Need help coding a scroll box onto an image

Please forgive my coding noobishness. It's been several years since I dabbled in HTML and CSS; I'm very rusty.

I'm having a great deal of trouble getting a scroll box to sit properly on top of this image. (Here is the link in case the click-through doesn't work, for whatever reason: https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png)

What I would like to do is position a scroll box over the image so that the end result looks as though the text that will go into the scroll box appears to be scrolling on the terminal screen (and not over the gray frame housing the screen). Basically, I'd like the scroll box to go on top of the image, so that, when one scrolls through the content within the box, said content looks as though it's actually being scrolled on the terminal screen within the image (again, without the content scrolling over the screen's frame).

I wanted to persist and get it to look right through hours of tinkering, but... I've had an exhausting day and I'd like to accomplish this ASAP.

This is the coding that I managed to put together so far. Maybe I'm just tired, but it seems like it's a mess now... I hope it isn't so disheveled that nobody can work with it.

<p style="background-image: url(https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png); background-repeat: no-repeat; background-size: 100%; margin:auto; width:1000px;height:591px;overflow:auto; position:relative; border:0px; padding-top: 50px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px;" target="_blank" rel="nofollow">Content would go here...?<br target="_blank" rel="nofollow"/></p>


I would greatly appreciate the help... I'm trying to get this done for my work.

Thank you.

Answer

As you can see you have to you 2 divs: The first is for the background image and to hide the scrollbar, the second one is to contain the text and to make it scroll. jsFiddle here.

<div class="img">
    <div class="scroll">
      <a>
         ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      </a>
    </div>
</div>
<style>
   .img{
  background-image: url(https://s5.postimg.org/pwy1ni4mv/Terminal_Screen.png);
  background-size: 100% 100%;
  width: 480px;
  height: 320px;
  text-align: center;
  overflow: hidden;
  padding: 7%;
}

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

.scroll a{
  font-size: 25px;
  color: green;
  font-family: Calibri;
}
</style>