background-position in android doesn't show

Question

I have the following css:

.flag
{

    background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg');
    width: calc(4 * 5.93px);
    height: calc(4 * 3.99px);
    background-size: calc(4 * 35.08px) calc(4 * 49.63px);
    cursor:pointer;

}
.flag.portugal
{
    float: left;
    background-position: calc(4 * -14.62px) calc(4 * -30.42px);
}
.flag.reinoUnido
{
    float: right;
    background-position: calc(4 * -21.40px) calc(4 * -40.22px);
}

And the corresponding html:

<div class="flag contentor">
    <div class="flag portugal" onclick="$('.lang').removeClass('mostra');$('.lang.portugal').addClass('mostra');"></div>
<div class="flag reinoUnido" onclick="$('.lang').removeClass('mostra');$('.lang.reinoUnido').addClass('mostra');"></div>
</div>

In my laptop it works fine, but in my android tablet it only shows two white squares.

Am I doing something wrong positioning the background? is it some incompatibility with the tablet's browser?

the image I'm using is:

And what I need to show in the divs are the Portugal flag and the United Kingdom flag like this:

Is there any polyfill/shim I could use to correct this?

Is it a typo in the question or are you not closing the background-image declaration for real? `background-image: url('http://192.168.1.88/david/images/flag_set`? Should be -> `background-image: url('http://192.168.1.88/david/images/flag_set');` — thepio, Sep 28 '16 at 10:30
Assuming that you copy wrong the `background-image` (that's incomplete), why you need `calc()` function, if you have the exact measures? — Marcos Pérez Gude, Sep 28 '16 at 10:30
calc is likely the issue, see http://caniuse.com/#search=calc — CBroe, Sep 28 '16 at 10:33
I used calc so if I need to change the scale I only need to change the 4 to a new scale factor! Im going to replace it with the correct values! thanks — davidmr, Sep 28 '16 at 10:35
@davidmr to accomplish that, it's not with `calc()`, it's with relative measures like `em`, `rem` or `%` — Marcos Pérez Gude, Sep 28 '16 at 10:36

score 1 · Answer 1 · answered Sep 28 '16 at 10:35

1

calc() is for purposes of calculations of different measures, for example 100% - 24px, 15em * 14%, etc. You have the exact measures, so you don't need calc. Maybe that's the problem. I'm assuming than your background-image sentence is fine in your code. However, I don't know why you are setting 2 decimals on pixel sizes, seems to be non-sense for me.

.flag
{
    background-image: url('http://192.168.1.88/david/images/flag_set');
    width: 23.72px;
    height: 15.96px;
    background-size: 140.32px  198.52px;
    cursor:pointer;

}
.flag.portugal
{
    float: left;
    background-position: -58.48px -121.68px;
}
.flag.reinoUnido
{
    float: right;
    background-position: -85.6px  -160.88px;
}

answered Sep 28 '16 at 10:35

Marcos Pérez Gude

21,869
4
38
69

My image is 3508 x 4963, I start by scaling it by 25 that's where the 140.32 x 198.52 came from. Im not using the 25 factor directly. I started by dividing my dimensions by a hundred and then applying a factor of 4 to apply a 25 factor! If I want to scale it by 50 instead of 25 I would replace all 4s by 2s! That was the idea! I dont know how to use relative measures like % in this case because my calculation are relative to the image size not the containers size – davidmr Sep 28 '16 at 10:49
1

Ok, I can construct an edition for this answer, but I need some time because I'm on work right now (spanish like you :P), but after launch I will answer you (if nobody else answer it). – Marcos Pérez Gude Sep 28 '16 at 11:18
Thanks! I've found out that the problem wasn't in calc! I was hiding it for mistake in another css line. However in android its adding another scale automatically so it shows several flags and the wrong ones – davidmr Sep 28 '16 at 13:22
So you don't need the answer? However, you can upvote this :) – Marcos Pérez Gude Sep 28 '16 at 15:30
Of course I'll upvote this! About not needing the answer... Well it still doesn't work as I'd like! Can you tell me why the scaling is working the same way in the laptop and the android? – davidmr Sep 28 '16 at 15:38
That's with `em`, if you set a parent with `font-size: 1em;` and all calculations inside it with em `.parent .child { width: 4em; }`, when you need to increment all childs you can set `.parent { font-size: 5em; }` and all childs will have the sizes multiplied by 5 (in this case, `.parent .child` will have `width: 4*5` automatically). That's the way to achieve that. – Marcos Pérez Gude Sep 28 '16 at 15:44

background-position in android doesn't show

1 Answers1