Design comparison
Solution retrospective
I used the background CSS property to add the images. Is this "best practice"? Is there any other better way to implement the same?
Looking forward to your responses 😄
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Alvin, great job with the solution it looks responsive and the layout is great, congratulations!
If you don't mind, I would like to give you some suggestions.
-
I think that using an html is a better approach, for accesibility and for semantic purpouse, use background image when they really are background images. If you are struggling getting the effect with an html image, just think on wrapping it on a
<div>
and use that background color on the div to get the desired effect. -
You should try getting your solution centered without using
height: 120vh
is moving your section to the bottom, instead of that, remove it and just use flexbox on the body to get everything center like this:
{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
Setting the body to a
min-height: 100vh
is the best way to get the desired effect on this type of challenges!Hope my feedback helps you, if you have any questions don't hesitate to ask, great work!
Marked as helpful1@alvyynmPosted about 2 years ago@DavidMorgade Thank you so much.
- I was able to get the overlay effect using your guidance. It made it so easy! You can have a look 👉 https://codepen.io/alvyynm/full/BarXZMX
- Centering has been a bit challenging, so I have been using a .parent-container just for that. Thanks for the suggestion; I'll fix it.
1 -
- @correlucasPosted about 2 years ago
👾Hello Alvin, congratulations for your new solution!
Answering your question:Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS (background-image) since this will make harder to the image be found. You can manage both images inside the
<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
To make the overlay effect exact as the challenge design you can take a shortcut and instead of using a long code you can do it by aplying
mix-blend-mode
and managing the opacity to blend the colors:.image-container { width: 100%; height: 200px; background: linear-gradient(rgba(99, 18, 150, 0.6), rgba(99, 18, 150, 0.6)), url(../images/image-header-mobile.jpg); background-repeat: no-repeat; background-size: cover; border-radius: 0.7rem 0.7rem 0 0; margin-bottom: 1.1rem; }
Instead of this code just use (in this case you need the image inserted in the html as
img
orpicture
to make it work.img { mix-blend-mode: multiply; opacity: 75%;}
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @neilk17Posted about 2 years ago
Good work Alvin and nice display pic!
One suggestion: On your parent-container, Instead of having
height: 120vh;
You could simply added amargin: 30vh auto;
Since you have a height greater than 100% it isn't sized perfectly but the rest looks good!About the image background I was not sure what the best way to implement that was either but your solution is looking good!
0@alvyynmPosted about 2 years ago@neilk17 Thank you. I have been having issues with aligning my .parent-container.
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