I have some weird “border” around my element that I can’t get rid of (pointed at by a red arrow in the picture below). I know for sure it’s not a border per se (if I include a border, it wraps my gray quasi-border), and I also know that it’s not the image’s fault (I tried removing it and replacing with a picture from a non-problematic tile). What causes it? Here’s a runnable pen
does it have something to do with the inherited properties of the
It is caused by the missing
alt attribute on the
img element. I assume it is some sort of placeholder for if the image doesn’t load and there is no alt text.
Edit: Actually I guess it is because it is an
img element but you are using it as an element for a background image. If you want it to be an
img it should have a source, if you want it to be a background use a different element type.
Here is a possible better explanation.
The browser is expecting a
src value on the
img element. As it does not have a source it is seen as empty. As it has no
alt text a border is shown instead. You are adding/overlaying a background image on an empty
Why is there no border inside other tiles?
Because you are not using an
img element for the other images, you are using
Thank you! You were right. Did I understand you correctly that
<img> includes that gray border by default unless there’s
alt attributes specified? I can’t say it’s very intuitive
<img>, by the way, wasn’t there on purpose. I initially had
<img>s everywhere but then decided to opt for
background-image. I forgot to make that replacement there
Yes, you got it right.
It might not be obvious to the developer unless they know about it but it is a feature to help the user. I think it makes sense to have a visual indicator for images that do not load.