All geek questions in one place

Styling Textarea with a background that scrolls with text?

I am trying to create a text box with a notepad background (for example: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/ ), but I encountered the same problem in the example when the text moves several lines per height and can scroll, the background does not scroll with it, so it looks bad, only text floating on all the lines. Is there a way to make the background move with the text when it scrolls and looks like a real note on paper?

0
source share
2 answers

May be:

<html> <head> <style> #fake_textarea{ width:925px; min-height:100%; background-repeat: repeat-y; background: url(http://www.artsinmotion.net/notebook_paper.jpg); padding-left:100px; font-family:arial; } #wrapper{ width:1025px; height:500px; overflow: auto; } </style> </head> <body> <div id='wrapper'> <div id='fake_textarea' contenteditable></div> </div> </body> </html>
+1
source

I don't know if there is a CSS-only method. Here is a way to use jQuery.

It swaps the background position of y to the scroll position.

http://jsfiddle.net/WTCUK/

+1
source

Source: https://habr.com/ru/post/1495290/

More articles:


All Articles