Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 4, 2016 at 8:02 pm #593494
    acceleration_man

    I have an issue where I’m using a background image in a color section directly below the header. The images display correctly on desktop, but mobile devices seem to be ignoring the positioning by default. If I check the “request desktop site” option (on Chrome via Android), the positioning displays correctly.

    March 7, 2016 at 5:52 am #594065
    Rikard

    Hi acceleration_man,

    Since the background image is set to cover its containing element some image data will be lost on smaller devices. You could try to add another sections and add an image better adapted to smaller screens and the show/hide the correct section via CSS. Let us know if that would be an option for you and we’ll help you out with some custom CSS.

    Regards,
    Rikard

    March 10, 2016 at 8:18 pm #596541
    acceleration_man

    Richard,

    Thanks for the response. I understand that parts of the images will be cropped depending on the viewing ratio, etc. However, this is not my issue. In the theme settings, I set the positioning of the parallax image to something like “Top Center”. However, when displayed on (at least some) mobile devices, it displays as if it was “Bottom Center”.

    I can request the “desktop version” of the site, and then the device recognizes the positioning as set. Note the difference between the first image (default), and the second image (desktop version requested):

    Default Display
    Desktop Request Display

    March 15, 2016 at 11:12 pm #598679
    Andy

    Hi!

    if this is happening with some devices only and not with others, then this sounds to me like a caching issue. Clear browser cache of your devices and hard refresh a few times. Which devices are you using?

    Regards,
    Andy

    March 17, 2016 at 4:51 pm #599710
    acceleration_man

    I’ve been testing on a couple different Android phones (Motorola and Samsung). I tried dumping the cache and refreshing, but the same result. Again, oddly enough, when I choose the option “request desktop site”, the image alignment displays correctly.

    It’s as if the image alignment CSS style is ignored (or set to “bottom”) when it displays for mobile. The other weird thing is that it used to display correctly, and I’ve encountered this problem without doing any editing on my end. The only things changed are the WordPress and Theme versions and perhaps the Android OS.

    March 17, 2016 at 5:36 pm #599793
    Andy

    Hey!

    you can adjust background-position on mobile using this code in Quick CSS field:

    @media only screen and (max-width: 767px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-position: -28px 89px !important;
}}

    Adjust the values as needed.

    Best regards,
    Andy

    March 17, 2016 at 8:52 pm #599944
    acceleration_man

    Andy,

    Thanks for the CSS! I think I have a workaround using a combination of percent and point values. Strange, but effective in this case. Thanks!

    Karl

    March 18, 2016 at 8:30 am #600146
    Rikard

    Hi Karl,

    Great, glad you got it working. Please let us know if you should need any more help on the topic.

    Regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mobile Ignoring Background Image Positioning’ is closed to new replies.