How to create css textbox with background image, text shoud not be overflow and should must be wrap inside image

Question

I want to create this kind of text box overflow y, and it should must be wrap inside the screen image in all view ports.

Answer 1

Create a div that holds the background-image and insert the textbox. Than you can position the textbox so it fits with margin and padding. It is not clear if you meant an editable textbox. Below is an example with editable textarea. This element has a lot of default styles that need to be disabled.

.wrapper
{
  width: 250px;
  aspect-ratio: 1;
  padding: 3rem 2rem;
  background: url('https://i.sstatic.net/inIfh.png') no-repeat;
  background-size: cover;
}

.wrapper textarea
{
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: none;
  resize: none;
}

<div class="wrapper"> 
  <textarea>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ultrices sagittis orci a scelerisque. Massa id neque aliquam vestibulum. Mauris ultrices eros in cursus turpis
    massa tincidunt. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Ipsum suspendisse ultrices
    gravida dictum. Id diam vel quam elementum pulvinar. Mollis nunc sed id semper risus in hendrerit gravida. Viverra
    mauris in aliquam sem fringilla. Quis varius quam quisque id diam vel quam elementum. Lacus laoreet non curabitur
    gravida arcu ac tortor dignissim. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Luctus accumsan tortor
    posuere ac ut consequat semper viverra nam. Turpis egestas sed tempus urna. Quisque egestas diam in arcu cursus euismod.
    Magna eget est lorem ipsum.
  </textarea>
</div>

Interactive Code

---

^{Update 2021/7/26 15:00}
It looks like the scrollbar is custom.

WebKit browsers

textarea::-webkit-scrollbar
{
  width: .6rem;
  background: transparent;
}
textarea::-webkit-scrollbar-thumb
{
  border-radius: 1rem;
  background-color: hsl(0, 0%, 40%);
}

Firefox

textarea
{
  scrollbar-width: thin;
  scrollbar-color: hsl(0, 0%, 40%) transparent; 
}

Answer 2

You can achieve this with the following code

HTML

<div class="wrapper">
    <img src="https://s3.envato.com/files/313678867/IMG_5721.jpg" alt="Background">
    <div class="text-box">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

And CSS

.wrapper{
  position: relative;
  display: flex;
  padding: 20px;
  height: 100vh;
}
.wrapper img{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.text-box{
  color: #000;
  font-weight: 600;
}