I have a text heading with a background image that circles the text using this css:
.page-id-44491 #page-header-bg h1 {
font-size:69px !important;
text-transform:uppercase;
background: url(http://rocketcafe.co.uk/wp-content/uploads/2015/12/scribble.png) no-repeat;
background-size: 500px 200px;
background-position: 50% calc(50% - 5px);
}
This works perfectly in most browsers and I thought, most devices - But I saw the site on an Samsung tablet yesterday and the background image does not position at all.
You can see the two comparisons here (the 2nd was sent by the client and is not great quality)
The site is http://www.rocketcafe.co.uk/
And the examples are:
https://www.dropbox.com/s/mxmmtmtz0pfshhu/Screen%20Shot%202016-02-27%20at%207.15.55%20PM.png?dl=0
https://www.dropbox.com/s/i4snyu96nsxkeo9/12782387_10153893672215729_994231173_n.jpg?dl=0
Does anyone know why this is?? There are no vendor prefixes for background image properties or the calc function so I have no idea why this is not working?
Any help would be much appreciated.
Thanks
Unfortunately I can't provide you the full answer. But I can help.
This is an Android Browser on screenshot. A pure evil for developers. Function calc (probably less function. I used it in less) dont work there.
Please look here. Maybe this answer helps you or someone provide alternative suitable for you.
