Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 17, 2019 at 6:02 pm #1079679
    JMDP

    Hi,
    I have a fullscreen Color section with a landscape image as a background on PC and “Landscape position” tablette, with a contact button on it.
    As the fullscreen image is cropped when displayed on the mobile, I have another image to display which is a Portrait image.

    How can I display this “Portrait image” as the Mobile Screen device background. (Thus not losing text or button at the foreground)
    I know that I may choose not to display the section on the PC, but in that case, I loose my main visual.

    The best would be:
    – Landscape image for landscape screen (PC, Mobile, Tablet)
    – Portrait image for Mobile and tablets for portrait reading

    • This topic was modified 5 years, 8 months ago by JMDP.
    March 17, 2019 at 7:45 pm #1079698
    Mike

    Hey JMDP,
    For your mobile devices, please try this css:

    @media only screen and (max-width: 767px) { 
#top #visuel-home {
background-image: url(https://your-site.com/wp-content/uploads/2019/03/Affiche-IronManech-2019-5e-Edition.png) !important; 
}
}

    Please besure to change the “your-site.com” in the code to your site.
    Your desktop image looks fine at 1200px and above, but I would recommend creating a third image for tablets 768px to 1200px

    Best regards,
    Mike

    March 17, 2019 at 10:13 pm #1079722
    JMDP

    Hum,
    it doesn’t seem to work. I still see having the landscape image on the mobile
    ?
    Did i do it the right way?

    March 20, 2019 at 3:27 am #1080632
    Mike

    Hi,
    Sorry for the late reply, I see that you have a space between the “URL” and the “(” in the css like this:

    background-image: url (//...

    there can be no space there:

    background-image: url(//

    Please try correcting this or include admin login in the Private Content area so we can be of more assistance.
    Did you consider creating a third image for tablets?

    Best regards,
    Mike

    June 10, 2019 at 2:12 pm #1108826
    JMDP

    Hi Mike,
    sorry for this late reply.
    I’ve finally get rid of the issue, using your screen dimension option, thus developping a special display for different screen size.
    Thanks for your help

    June 11, 2019 at 12:08 am #1108928
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Color Section Image Background on Mobile Device’ is closed to new replies.