Background CSS property not working in Safari or MAC OS?

Did you tried applying background to a button or link using CSS background property and it didn’t work ? If yes, you might have tried a number of solution so far. None worked?

You must have noticed that none of the following CSS properties worked on that particular link or button.





Inspect that element in safari and check if this property is applied somewhere -webkit-appearance: button; Now all you have to do is replace it with -webkit-appearance: initial; .

You may achieve this goal by over-riding it using class on that particular link or button. For e.g,

.button-class { -webkit-appearance: initial !important; } 


If you are facing problem with background-image property in safari i.e, image is not being shown in only safari browser, then you should try this:

Check if your css is like this background: url(path/to/image.jpg) no-repeat center center / contain; then try writing this as:

background-image: url(path/to/image.jpg);

background-position: center center;

background-size: contain;


I hope this helps you. But if it doesn’t please explain your problem via comments.

Happy Coding!




Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: