Is it possible to put an image on another image?

Question

I'm a beginner in html and css, I need to know how can I do this effect in the link below:

http://imgur.com/Ub4e9PT

ignore the reflection if it's not possible/hard to do it in css.

Answer 1

Yes, with the multiple background in CSS3 you can put an image on another image. :)

Read this: http://www.css3.info/preview/multiple-backgrounds/

Answer 2

Yes, i can, but the codes in comments are very confused.

In short:

#example {

background-image: url('first background'), url('second background');

background-position: position of first background, position of second background;

background-repeat: value for first background, value for second background;

}

It's important to remember that second background is always ON first background.

For example, if you wanna put a logo in another background, you can insert the url of the image in "background-image" like second value.

I will leave other resources, simpler:

https://www.w3schools.com/css/css3_backgrounds.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

PS - Sorry for my English ^_^

Answer 3

@Maz thank you thank you soo much 😢💖
I really appreciate your help, and sorry if it was hard writing the code here, I'm following your code now 😊
and no worries about your English, I could understand you well, my English is not good enough too

Thank you again

Answer 4

There is another way as well. You can do it by assigning a relative position to the little circular image. Then move the image to any direction. But keep in mind the z-index property.

Answer 5

hmm I tried to understand it but I'm not sure if I got it >.< can you please write by in line way, I mean css embedded inside the html code

really thank you for your answer 🙂