Hi all
For my portfolio project I am using project thumbnail images as card backgrounds and putting the links to the projects on top . However this seems to limit my ability to size them as I would like.
Backgound:cover/contain look horrible. Background-position helps a little but doesn’t alter size of course. I prefer not to use positions where possible or anything that messes with normal flow but it kinda looks like I need to use images as img src rather than background url if I want to size them exactly.
Then I guess I would have to use position to put the links on top.
I havn’t linked to code as all tests passed and this is just superficial. Is there any way to set exact image widths or heights with background url?
I’m slightly unsure exactly what you mean, but is it this? I have made two card elements, the one on top uses <img> for background, the bottom uses background-image.
Thank you for taking the time to have a look @MatchaCrisp , you are a star 
. For some reason background:cover or contain are not doing a good job for me. I fully expected cover to work well but it did not.
I am using FCC project images and I chose the small versions but they are still quite big it seems and reluctant to scale down. I know I can do it if I treat them as images rather than background url but hoped I could make background url work better than it is.
My project is https://codepen.io/Jaydog599/pen/bGWRpKE?editors=1100 if you want to see what I mean, but don’t feel obligated as you have already been generous with your time.
Ok I see what you mean. Unfortunately as far as I’m aware if you would like to size your background-image, you kind of have to have the right aspect ratio already. So lets say each card is 400px tall and 300 px wide, then the only way for background-size:cover to work well is for the background image to already have a 4:3 aspect ratio.
You can see how the browser treats the values of cover or contain here, they don’t stretch to fit perfectly on both dimensions.
1 Like
Thanks for the help.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.