0

I try to import a .png file via url() in CSS, but the button ends up being a solid color from within the image, instead of the image itself. I've tried different images and it just loads a different solid color.

The Navbar should be a solid color and there are buttons in the corner but its affected by the blur from surrounding elements. I tried messing with the z-index, but that doesn't change anything. I tried removing blur, and it fixes the blurry gradient, but thats not an issue for me, the .png is still not loading correctly.

I'm still trying to under CSS and this is more than likely because of mixing of different tutorials without understanding the core of CSS, but I'd like to understand why they clash.

Link to my CodeSandbox Example

soybean3r
  • 1
  • 2

6 Answers6

0

The problem is that your image URL is returning HTML instead of the image. Try going to https://tumuy.csb.app/assets/icons/x.png.

See: Is it possible to serve Static files with create-react-app from public folder?

Mike
  • 23,542
  • 14
  • 76
  • 87
  • So, as I was researching the create-react-app documentation, I realized that my original code is in JS, HTML, and CSS. For my actual project, I'm not using React. I converted my project to CodeSandbox, just because it was something I had an account with. I can't import xSymbol from "../assets/icons/x.png" in regular HTML. This is my fault when I created the question. – soybean3r May 28 '21 at 20:53
0

Can you upload your code ?? Did you try to add an offline and online image ?

brown
  • 31
  • 1
  • 7
0

In the code example, the problem is the name of 'css class', you had to use 'class' instead of 'className'.

You can resolve this problem first?

Warning: Invalid DOM property `class`. Did you mean `className`?
div
div
Navbar 
    in div (created by Navbar)
    in Navbar
Pablo M.
  • 494
  • 7
  • 14
0

See: https://codesandbox.io/s/glass-form-forked-hcb20

Codesandbox is not serving the image using the relative URL. I have converted it to blob and used it. Just a hack, but works for now.

Prayag Choraria
  • 710
  • 5
  • 15
0

Do not use class in styling replace it in className as it is linked directly to reactjs for styling in reactjs . class chooses css whereas in react you give className is used in react for styling . You can also use its Id to style the element

Muhammad Shoaib
  • 1
  • 1
  • Yeah, I address this, but the issue remains – soybean3r May 28 '21 at 20:41
  • alright . maybe this article help you https://stackoverflow.com/questions/30968113/warning-unknown-dom-property-class-did-you-mean-classname – Muhammad Shoaib May 28 '21 at 21:33
  • I appreciate the effort in finding me resources, but the core of the issue isn't the className. Now that I have read other's attempts, I've come to realize this isn't a React-Based issue either. – soybean3r May 28 '21 at 23:03
  • ok , if you find the core of the error do share , maybe i can resolve it else it would add in my knowledge . thanks – Muhammad Shoaib May 30 '21 at 21:59
  • I don't know if you saw, but the fix was to change `background-size` to `100%` – soybean3r Jun 11 '21 at 15:23
0

After trying so many things, I randomly tried sizing my background-size: 100% and got the result I was looking for.

soybean3r
  • 1
  • 2