Aster Nyxx Aster Nyxx - 9 days ago 6
CSS Question

How to position a scroll box on top of an image using only inline CSS

I posted this question last night without fully understanding what it was I was trying to ask. After some research I have been educated and I am ready to try again!

On a website that I frequent (which shall remain nameless for the sake of privacy), I am trying to spiff up my profile page in accordance with my chosen theme (sci-fi, particularly outer space). I would like to put a scroll box on top of this image:

enter image description here

But I have been experiencing great difficulty in getting this to work. I just discovered that the reason is because the particular website on which I am working does not allow users to utilize straight HTML or CSS to decorate their profiles; rather, it is inline CSS (CSS code in HTML tags, I believe?) code that I need, with which I am only slightly familiar.

This is the coding that I managed to scrape together so far...

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


Here is a JSFiddle demonstrating the very idea that I am trying to implement. Note that the image is not the background of the scroll box but rather like a tabletop for it. Also note that the content within the scroll box does not pass over the gray frame containing the terminal screen within the image. This is exactly what I am trying to accomplish.

Answer

If you are allowed to paste in divs, this will be a solution:

<div style="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%;">
    <div style="height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-right: 25%;">
      <p style="font-size: 25px;
  color: green;
  font-family: Calibri;">
      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. 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.
      </p>
    </div>
</div>

If you can only manipulate the inline css, I don't see a possibility to put a scroll box on top of the image. The best you could probably do is some static text.

<p style="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%;font-size: 25px;
  color: green;
  font-family: Calibri;">
      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 dolore magna aliquyam erat, takimata sanctus.
      </p>