0

I want to set transparent backgroundimage but not the text:

My CSS code:

 .contentFirstPage{
  height: 200px;
  position: absolute;
  top: 80%;
  left: 20%;
  right: 20%;
  transform: translate(0, -50%);
  padding: 10px;
  background-image: url("./Images/background2.jpg");
  background-size: 100% 100%;
}
Ben Johnson
  • 753
  • 1
  • 9
  • 18
  • You will need to put the image in another element/pseudo-element and apply opacity to that. – DBS May 25 '21 at 09:59
  • Can you give me example, please. – Ben Johnson May 25 '21 at 10:00
  • I did not understand. If background image is transparent, then why are you adding an image? – Tushar Shahi May 25 '21 at 10:01
  • What exactly you want to do? You need a faint image in background? – Kamal Aujla May 25 '21 at 10:01
  • 2
    Does this answer your question? [Set opacity of background image without affecting child elements](https://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) (I would look at some of the lower scored but more recent answers, as the question is rather old. This answer specifically is the method I was talking about: https://stackoverflow.com/a/48197116/1650337) – DBS May 25 '21 at 10:02

0 Answers0