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 .project-tile?
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 img element.
1 Like
Why is there no border inside other tiles?
Because you are not using an img element for the other images, you are using divs.
Thank you! You were right. Did I understand you correctly that <img> includes that gray border by default unless there’s src and/or alt attributes specified? I can’t say it’s very intuitive
That <img>, by the way, wasn’t there on purpose. I initially had <img>s everywhere but then decided to opt for <div>s with 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.