如何在背景颜色上添加图像？

Question

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 class="teal"> <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>

Answer 1

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;

Answer 2

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>

Answer 3

u can use this:

background-image: url()