How to add photo over another photo in html

Question

how can I add picture over another picture like this:

Here is my HTML code:

<body>

    <div class="container-fluid">

        <p><a href="" class="as">Начало</a> <a href="" class="as">За нас</a> <a href="" class="as">Промоции</a> <a href="" class="as">Контакти</a></p>
        <p class="moto">Веднъж хапни, за цял живот се пристрасти!</p>

    </div>

and CSS code:

.container-fluid {

    height: 470px;
    background-image:linear-gradient(to bottom, black, black, transparent 70px, transparent 330px, black, black 500px),url("images.jpg");
    background-size: 100% 100%;


}

You can set one img as html background and the other one as a normal img — J.vee, Dec 03 '18 at 08:11
Yes, I will be using position to align the image, but how I should add an image over another? I tried with but the picture hasn't loaded. — PetrovD, Dec 03 '18 at 08:19
your img src tag should look something like this `` check this [link](https://www.w3schools.com/tags/tag_img.asp) for more info on img tag — J.vee, Dec 03 '18 at 08:48
Yes, I did it. Now I have to position image. How will do this? — PetrovD, Dec 03 '18 at 08:50
check out this post!!!! [How do I position one image on top of another in HTML?](https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) — J.vee, Dec 03 '18 at 09:02
I solved my problem with using display:inline; ! Thanks to all! — PetrovD, Dec 03 '18 at 19:17

score -1 · Answer 1 · answered Dec 03 '18 at 11:03

-1

You might try using position, and also giving the image you want on top a z-index.

answered Dec 03 '18 at 11:03

cakeLord

1

How to add photo over another photo in html

1 Answers1