Aster Nyxx Aster Nyxx - 7 days ago 5
CSS Question

How to code a scroll box onto an image?

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.

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).

This is the coding that I managed to put together so far. It seems like it's a mess now... I hope it isn't so dishevelled 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>

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>