2

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

Mr Toad
  • 202
  • 2
  • 12
  • 41
  • What browser did you use? Check this to check the `calc` support http://caniuse.com/#feat=calc – drosam Feb 27 '16 at 19:34
  • I'm just waiting to hear back from the client as to what system he is running on his tablet. I can remove the calc and just have the 50% 50% but is there another way to do the offset? Maybe I could try transform translate – Mr Toad Feb 27 '16 at 19:55

1 Answers1

1

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.

Community
  • 1
  • 1
Shulyk Volodymyr
  • 767
  • 6
  • 11
  • Brilliant thank, I will try and remove the calc function and see how I go. I will report back. Unfortunately I don't have a device to test on but I will see how I go. – Mr Toad Feb 27 '16 at 20:01
  • Come to think of it, padding will apply to the whole div, I need to move the background only... – Mr Toad Feb 27 '16 at 20:03
  • 1
    I removed the calc function all together and it worked fine. The positioning wasn't as accurate as I had previously but it fixed the problem. Thanks! – Mr Toad Mar 05 '16 at 00:07
  • I am glad I could help. – Shulyk Volodymyr Mar 06 '16 at 21:32