current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 2 down vote favorite

This seems like a strange issue and I hope that I just overlooked something but I have a link with a background image that is positioned just to the left of it. The style below works fine in a desktop browser and on an Android browsers, but it doesn't seem to effect the position in mobile safari.

.load-more-link.ajax-spinner {
background: url(images/ajax-loader-dark.gif) no-repeat 20%;
margin: 0 auto;
width: 200px;
}

Am I overlooking something or has anyone run into similar issues? How can I position this background image in mobile safari?

share|improve this question
    
Try declaring both X and Y of background position. Currently you declared only 20% (X). Put 20% 0 to be X20% Y0 and test again. –  RaphaelDDL Jun 4 '13 at 20:32

1 Answer 1

up vote 0 down vote

You should complete the background styling shortcut with both the X and Y coordinate to resolve any ambiguity:

background: url(images/ajax-loader-dark.gif) no-repeat 20% 0%;

Or you could write out the position property separately:

background-image: url(images/ajaxloader-dark.gif);
background-image-position: 20% 0%;
background-repeat:no-repeat;

EDIT

And of course, you could try fiddling those percentages. I don't know what your markup looks like, but there could be the chance the image is being obscured if it is behind something else.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.