How do I add an image over background colour?-CodePudding

How do I add an image over background colour? I want the image the to at the bottom of the div. I tried it with the code below but it doesn't seem to work for me. See code below:

.teal {
  text-align: center;
  padding: 40px;
  background-color: #2dd5c4;
  background-image: url("https://www.w3schools.com/html/pic_trulli.jpg");
  background-repeat: no-repeat;
  background-position: bottom;
}

<div >
  <h3>Lorem ipsum dolor sit amet</h3>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo l. igula eget dolor. Aenean massa. <br />
    <button> Call to action</button></p>
</div>

CodePudding user response：

Maybe try add the !important tag at the end of the background-image

background-image: url(https://www.w3schools.com/html/pic_trulli.jpg) !important;

CodePudding user response：

you can put the image in a different div and put it over your teal class using z-index or having it as a child component to teal class
z-index

    <div class='teal' >
        <div class='image' > </div>
    <div>

CodePudding user response：

u can use this :

background-image: url()