Solved How to use a png image for a button

[AndyM48]

I have read so many posts in the last few days that my head is spinning. I knew nothing about css before and now I feel really stupid for having to ask such a simple question.

I added this code to my custom.css:

.button-toolbar button[title="Go to homepage"] {display: none;} 

.button-toolbar button[title="Go to homepage"] {
    background-image: url('home.png'); 
}

The first line removes the existing home button, but the second line does not replace it.
I tried background instead of background-image, in fact I cannot think how many permutations I have tried.
Please put me out of my misery

PS the home.png icon is in the same folder as the custom.css file.

[DoctorG]

@andym48 said in How to use a png image for a button:

.button-toolbar button[title="Go to homepage"] {
background-image: url('home.png');
}

On my Vivaldi 5.2 this works:

.button-toolbar button[title="Go to homepage"] { 
	background-image: url("myhome.png") !important;
}

[AndyM48]

Thank you thank you thank you.

It seems that the fisrt line was redundant. That removed the button completely. I commented out that line (and added !important, but I am not sure if that was necessary) and now it works. Hooray!

And in case I did not say before - thank you.

[DoctorG]

@andym48 !important is often necessary in style definitions. You can add it always, it does no harm your browser.

[dude99]

@doctorg said in How to use a png image for a button:

You can add it always, it does no harm your browser.

IMHO this is a bad advice, !important is important because it's reserved for very rare instances, it's the exception to the rules situation; if everything are labeled "important", then nothing will be important... & eventually you are going to end up in a confusing messy hell loop that you can't fix with another !important. This is especially true with element which you will manipulate in multiple different/similar situation, you might get stuck with certain state that you don't want & can't be get rid of.

https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

https://css-tricks.com/when-using-important-is-the-right-choice/

[DoctorG]

@dude99 My answer was not made for webdevs but noob users.
If you mean more help for users is needed, tell them about usage, precedence and inheritance of CSS rules.

[dude99]

@doctorg It's still a bad advise to always resorted to "nuke solution" to fix most problem, especially for noobs that doesn't know any better.

I once also a CSS noob that exploiting !important all the time because it's very powerful & it can fix pretty much everything immediately. Until later, I realized I have overdo it & get stuck in an impossible problem because I plastered pretty much everything with !important & I no longer able to brute force my way out of this one... Then I have to waste hours to debug everything to fix the disaster I made (I think it would be faster if I just start all over properly). LOL

[DoctorG]

@dude99 The best way is to learn how CSS works and to know when keyword !important is needed.

[dude99]

@doctorg That's why I insert 2 reference links in previous post which discuss about what, how & when to use !important properly.