Why Can't I Resize Content in Element::Before{}

I am testing out the Element::Before{} pseudo element to better understand it. I tried adding an image before a ul li element, and resized it to 50px by 50px. The image does not change. Here is my code pen. Ideas on why?

StackOverflow to the resque: https://stackoverflow.com/questions/6668577/using-before-css-pseudo-element-to-add-image-to-modal/6668643#6668643

.happy::before{
  content: '';
  display: inline-block;
  background: url("https://i.ibb.co/kKNS0y3/dandi.jpg");
  width: 50px;
  height: 50px;
}

Thank you. That put the image where it should be… mostly. I’d like it centered but I think I could mess around with some properties to get that achieved. What I don’t understand is why only a portion of the image is showed (cropped) instead of an entire, resized version of the source image. Do you know why? Is this how a professional would add an image before an html element?

It probably has to do with giving a fixed width and height to the image.

Instead of using before pseudoclass, I would actually use img tag, because the before pseudo class has limitations.

Add background-size: cover; (or contain);

No one who’s adding 6000x4000 15MB picture as an icon should be called a professional :smirk:

I agree and did consider that; however, I thought it would just be resized. If I use a 300x200 resolution image, would the css/html logic resize it or would I still have this issue?

css will squash/stretch the image into dimensions you specify, but user still have to download the initial image.

Nice, thanks. For the sake of my ego: trust me, I would never upload my full res images to use practically. Just tossing some ingredients in the pot to get a taste atm.

Thanks. I was thinking that by using the before pseudo element, before, I was reducing the amount of control I get over that image. I too would rather just use an img tag and align it with a relative position and properties. Thanks everyone.