0

I have an <img src="<...>.webp"> tag that I want to migrate to CSS. I worked out a nice solution that works in Chrome and shows the image centered:

HTML

<img id="logo">

CSS

#logo {
  content: url("...");
  margin: 0 auto 0 auto;
  display: block;
}

No need for a container, background, width, height etc. However, in Firefox there is no output. What is the incompatibility here and what would be a clean solution to display an image in all major browsers identically?

jamacoe
  • 519
  • 4
  • 16
  • 1
    _what would be a clean solution to display an image in all major browsers identically?_ Using the actual function of an image tag `src` attribute. Why do you want to move the content of an `img` tag to CSS? – disinfor Mar 17 '20 at 20:47
  • Does this answer your question? [content attribute of img elements](https://stackoverflow.com/questions/11173991/content-attribute-of-img-elements) – disinfor Mar 17 '20 at 20:50
  • @disinfor I want all image source paths in the .css file. When I use src instead of content I get the same result: works in Chrome, but not Firefox. The idea of content instead of a container background was given in a different SO answer. – jamacoe Mar 17 '20 at 20:51
  • @disinfor That similar question just describes the problem but does't give a solution (beside a downvoted answer with container, background and width) – jamacoe Mar 17 '20 at 20:58
  • 2
    I'm not sure what you are trying to accomplish. If you consider the logo to be content, then it should be sourced in the HTML. If you don't, then why put an element there at all when a background image would suffice? – undefined Mar 17 '20 at 20:59
  • 1
    @jamacoe exactly. Because `url()` in the `img` content doesn't work. https://stackoverflow.com/a/55633443/1172189 Also, as Shelton said, WHY do you want to do this? The `src` attribute on an `img` tag/element works across ALL browsers. – disinfor Mar 17 '20 at 21:00
  • @shelton I have all the img tags in the HTML but they are webp and don't display on safari. Now I found this nice CSS trick to define different classes and source paths depending on the browsers capabillities. I want to implement that, so first step is to get all the source urls to the CSS https://css-tricks.com/using-webp-images/ – jamacoe Mar 17 '20 at 21:06
  • @disinfor I tried this, but it shows a thin white border arround the image and border=0 won't make it go away: HTML and CSS .c_logo img {background-image: url(" ... "); margin: 0 auto 0 auto;display: block;width: 211px;height:150px;} As you might have noticed, I am still learing and I really appreciate your help. – jamacoe Mar 17 '20 at 21:17
  • 3
    Either use a format that works everywhere, or look into `` with different sources. The hack you're trying to accomplish is not recommended. – chriskirknielsen Mar 17 '20 at 21:20
  • 2
    A couple things: 1.) you should put in your question you are using `webp` images. 2). Even if you put the `webp` in your CSS, you still need a fallback `jpg, png or gif` for other browsers. webp doesn't magically work if you use it as a `content` property value. For the white border, you can use the `border: none` property in your CSS. It's cool you're still learning! But the approach in this case is a little bit off. – disinfor Mar 17 '20 at 21:20
  • @disinfor I have updated the question accordingly, but I does it make a difference? For the fallback to jpeg I got the aforementioned CSS trick working, that's the reason why I want the images in the CSS. The border: none doesn't make the thin white border (looks like 1px) go away and neither does border=0. In Chrome DevTools doesn't indicate any border, and so I checked if it is part of the image itself, but it is not. – jamacoe Mar 17 '20 at 21:28
  • @chriskirknielsen Thank you, I will resort to if I can't solve it otherwise. Why is the mentioned fallback hack not recommended? It works. – jamacoe Mar 17 '20 at 21:30

0 Answers0