Profile Card Component using HTML and CSS
Design comparison
Solution retrospective
Dear Folks,
I would like to understand the difference between importing the image from HTML and that from CSS. As always, you are welcome to criticise the output as I am new and learning.
And, how to generally decide which component must have position: absolute with respect to its parents with position: relative?
Community feedback
- @ViyanMdPosted almost 3 years ago
Also, just a hint, you can totally do this project without both of these in your code :)
0 - @ViyanMdPosted almost 3 years ago
@aparajitdotbee Gotcha. Basically, you use absolute positioning when you want to determine exactly where you want to put your element. Nowadays people use position: absolute when it’s impossible to position the element with other tools like flex box, grid, etc. I would recommend reading a couple articles on how it exactly works, but it’s pretty simple. Position relative is mostly used for an element inside which you want to place an absolute positioned child element, which becomes relative to it’s parent. Same thing, the theory is rather simple, so check any article on that as well.
0 - @ViyanMdPosted almost 3 years ago
Usually, we use background-image when it's not a part of the content, but for design purposes. It also increases loading speed. Check this article on StackOverflow: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image In regards to the second question, it's not really clear. Could you describe what was the issue? Maybe I could help if I know the context.
0@aparajitdotbeePosted almost 3 years ago@ViyanMd Thanks for the reply. The second question was w.r.t to the usage of the position parameter. In which cases do we generally apply them?
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord