[Solved] Placement of background image

[Atelierbram]

Have been trying chrome devtools emulation, but looks good in there, so I don’t know. Are the caches on the phone(s) flushed (browsing data removed)?

[karimphoto]

@Atelierbram Amazing support from you :)

I still don’t get it to center the image on emulation tools.

I’ll try to get my hands on some devices to do some more testing. I get back whit the result.

Have a great day,

[karimphoto]

Hi,

Now I tried on a Samsung Galaxy III and it don’t look good.

The image dosen’t center or scale.

This is how it looks on a Samsung Galaxy III https://www.dropbox.com/sh/6c6l6nd7164e4lg/AACox2XrU3lqvpznd7jkNedFa

[Atelierbram]

There seems to be an issue with media-queries with this device.
Found a link to diagnostic tool to find the right one.

Maybe this?

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)

It’s from cssmediaqueries.com

But after that there may also be the implementation of the ‘hamburger menu’ that needs to be triggered. Can’t say how it works for sure when looking at the code, is it a javascript plugin?

[karimphoto]

Thanks,

I swapped out my “@ media (max-width: 850px) {” to the one you gave me but it looks the same.

This is how it looks on online emulators.
https://www.dropbox.com/s/udpcdtoiu84qtm3/Screenshot%202014-05-20%2013.26.20.png

It feels like the Samsung is the biggest issue for me.

[Atelierbram]

You could try the ‘mobile first’ approach. Makes mobile styles the default, like this:

body.myatu_bgm_body {
 background-image: url('http://karimphoto.com/wp-content/uploads/2014/05/20140419-_MG_2465.jpg') !important;background-position: center center !important;background-repeat: no-repeat !important;background-attachment: fixed !important;background-color: #fff !important;
 background-color: #FFFFFF !important;
 background-position: 50% center !important;
 background-repeat: no-repeat !important;
 background-size: contain;
}

@media (min-width:850px) {

body.myatu_bgm_body {
background-position: 81% center !important;
background-size: auto 85%;
}

}

One of the advantages of doing it like this, is that desktop browsers tend to be more up to date, and therefor more likely to support media-queries.

[karimphoto]

It looks the same :(

I need to research further on this

Please let me if you have any other ideas.

[Atelierbram]

Updated the code above from slight error, maybe try again with this.
There may also be an issue with the implementation of the ‘hamburger menu’ that needs to be triggered somehow (javascript detection somewhere?), and maybe isn’t on the phone. Someone has to dive a bit deeper into the code to find out, I’ve run out of time for now.

[karimphoto]

Thanks allot @Atelierbram for all your help :)

I give it a try. Can you post the updated code please?

[Atelierbram]

Can you post the updated code please?

I did update it in the previous ‘code’-section (maybe after you tried it out), see above after ‘mobile first’ etc.
When trying it again, maybe also refresh the page a few times, or clear browser cache, can’t see why these styles won’t work …

BTW, have you already start thinking about optimising? Guess there is room for improvement when concatenating javascript files for example.

P.S. Great photo’s!

[karimphoto]

I did update it in the previous ‘code’-section

Ah sorry, great :)

BTW, have you already start thinking about optimising?

Yes I have but my knowledge is just not there :( I think I need to hire some one to do it for me.

P.S. Great photo’s!

Thank you very much :)

[karimphoto]

Hi,
Part of the problem was the standard Internet app on Samsung, if I now use Chrome on the Samsung it looks ok.

Thanks again for all your support.

[Author]

Posts