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.

background

background-image

background-color

background-size

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!

 

 

Sep,20,2014
Tags:,

Leave a Reply

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

%d bloggers like this: