KPC
Kevin Powell - Community•4d ago
Jonah

How to position the quote illustration?

I'm very bad at positioning illustration, and trying to get better. Here is my code pen, and thank you! https://codepen.io/Jonah-the-lessful/pen/XJrodNy?editors=1100
Jonah
CodePen
Untitled
...
No description
4 Replies
Jonah
JonahOP•4d ago
I try using position absolute, it works well, but when I shrink down to mobile, the illustration drift away.
Kapteyn Universe
Kapteyn Universe•4d ago
Depends on what you trying to do i guess. If you want to put quote img inside of one or all of the testimonial, you can just use 
.testimonial{
    background-image: url(https://i.ibb.co/bgrG5z8/bg-quotes.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
}
.testimonial{
    background-image: url(https://i.ibb.co/bgrG5z8/bg-quotes.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
}
and remove the quote div. If you want it to be at the same position of your image; use z-index on quote and try relative units instead of fixed one for positioning. Absolute positioning is smt i can't do great too but I would put quote div inside the testimonial container or just first testimonial, use position absolute on the quote and relative on the parent to make it looks like the image.
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•4d ago
You could do all that with a single property instead of having 4 different properties background: url(https://i.ibb.co/bgrG5z8/bg-quotes.png) top left / auto no-repeat; But i would rather write it background: url(https://i.ibb.co/bgrG5z8/bg-quotes.png) 0 0 / auto no-repeat;
Jonah
JonahOP•4d ago
Thanks!

Did you find this page helpful?