Text background overlaps image , I want to cover the image with the background, until the Image ends-CodePudding

The red pointed lines show, where I want the green background to end:
https://i.stack.imgur.com/w7O91.jpg

and here is an example, to let you EXACLY know what I mean:
https://i.stack.imgur.com/QMV9m.png

I first tried to put everything in to a <Div> container (Below with the Class: news) to size the background in, which did not work. It stayed the same.

HTML:

<div >
    <img src="pic.png" alt="" >
    <div > LATEST </div>
</div>

CSS:

.news {
  position: absolute;
  opacity: 1;
  z-index: 2;
  text-align: center;
  color: white;
  top: 400px;
  left: 100px;
 
  
}

.news-pic {
  height: 500px;
  width: 900px;

  box-sizing: border-box;
  border-radius: 15px ;

}

.top-left {
  position: absolute;
  top: 25px;
  left: -40px;

  
  font-size: 1.5rem;
  font-family: Roboto;
  font-weight: 700;
  color: white;
  background-color: #3bbe54;
  width: 200px;
  line-height: 50px;

  text-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.25);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

CodePudding user response：

Add overflow: hidden; to .news

.news {
  position: absolute;
  opacity: 1;
  z-index: 2;
  text-align: center;
  color: white;
  top: 400px;
  left: 100px;
  overflow: hidden; 
}

CodePudding user response：

Remove position tag from your code.

.news {
  

  opacity: 1;
  z-index: 2;
  text-align: center;
  color: white;
  top: 400px;
  left: 100px;
 
  
}