Profile card solution using HTML and CSS

@rileydevdzn Thanks for the answer! I have a question regarding the background that you proposed. If would do that, how can I position the background on top of the card, and does it affect the width of the overall card? Because at the moment, the width of the card is given basically by the background img inside of it, and I was wondering how it would interact if it would be a background instead of an img.

Thanks!

@Feithers Great question!

You’re exactly right, in your current code the width of the card is coming from the width of your image element (a child element). If you just substitute a background-image for the image, it will change the width of the card and you won’t be able to see it!

One thing to be aware of is that in this project, the width of the image file provided is exactly the same as the width of the card (in the desktop design), but this isn’t always true IRL.

To fix this, first we would explicitly set the width of the card. You can find this width value by looking at the image file info or opening the svg in a browser and using Inspect Element.

Then use a background-image on the child element and make sure the child element takes up 100% of the available space (like you did with .stats). Since there isn’t any other content in this div and an empty div has a height of 0, we’ll also need to set the height of the div (you can also find this value by looking at the image file).

This will set the card width and add the semantically correct background-image.

To answer your question about how to position it on top of the card, since we’re setting a background-image on a child element inside the card, it’s already there. It’s a little confusing since there are a lot of background-images in this project!

Let me know if that helps or if you have any other questions!

-Riley

@rileydevdzn Yes I understood everything perfectly, the only thing that I've read somewhere (maybe I'm wrong) is that I should try to avoid giving fixed width values to my elements, so they don't act weird on responsive media. Like I said, maybe I didn't understand and I'm wrong, but just a question. A second question would be, when would you do the background technique and when the img one?

Thanks!

@Feithers

Yes, you are correct, avoiding fixed width values is generally a good rule of thumb. Fixed widths with absolute values (px, rem) can do some funny stuff as you change screen sizes.

There are a couple ways to both declare values and keep elements responsive, like using relative units (viewport units, percentages, em) instead of absolute units and/or using CSS functions. You could set a card width at 70vw (viewport width) units, for example, and it would adjust to be 70% of the viewport width at any size.

You can set some boundaries by explicitly declaring min-width and max-width values through CSS (min and max can apply to lots of things, not just widths). Another option for better control over the maximum and minimum values in fewer declarations (since the range of screen sizes is pretty big), is CSS functions. Math functions, specifically, since there are a ton of functions in CSS.

You can set widths with calculations, for example, like width: calc(100% - 2vw); There are also CSS min() and max() functions, and there’s even more detailed functions like CSS clamp() that take a minimum, “preferred,” and maximum value as arguments.

Definitely play around with all the different ways to declare widths, sometimes using relative units will be enough, or sometimes a simple calc() works and you don’t need something like clamp(). And sometimes clamp is just fun to play with 😊

Another great question!

The rule of thumb I use is that purely decorative things like patterns and textures, things that are just there for “visual eye-candy” I usually put into background-image and everything else I put into an img (or picture) element with alt text. Personally I start with everything in img elements and think about what I would care about if someone were reading the page aloud to me. Would I care about “pattern of repeating circles?” Does it help me understand the page at all? If it’s a pattern or a texture like that, I’ll move it into a background-image instead. But for something like the profile picture of Victor Crest in this project, I’d keep that an img with alt text. I’m not an accessibility expert, and I’m working to improve my skills with alt text, but “profile photo of Victor Crest” is both simple and expresses exactly what the photo is.

A lot of the time it’s not that straightforward though. Here’s some decorative image examples from W3C to show you what I mean. The first one with the border is something that can also be easily created using a div and CSS, but the next 3 are the ones I think are more helpful, for me at least.

The article is focused on when to use (or not use) alt text, which is another way you can make an image decorative. There are a LOT of opinions about when to use background-image vs. img element. That thread shows it’s age with some of the answers (don’t replace text this way, there are better options now).

I don’t like using “it depends,” but unfortunately it really does depend on the context/situation. Short version, I use an img for anything that is informative or functional, which is most things; the part that changes is whether to include alt text. FYI you can move forward or back in the W3C article (side nav or there’s buttons at the bottom too) to see their recommendations with more examples of informative and functional images. I use a background-image if it’s a pattern or a texture that’s just there to make the page look nice.

That was a super-long answer, but hopefully it helps!

@rileydevdzn

Thanks so much, all super clear!