Okay
  Public Ticket #992032
Background image for mobile instead of videobackground
Closed

Comments

  • Richard started the conversation
    December 16, 2016 at 8:25pm

    Hi,

    What is the best width and height for a background image which is displayed on a mobile while the PC shows a background video?

    Whatever  I do, the background image does not show completely and the image quality is not okay. This is in an upricht position of the mobile phone.

    Thank you for your help.

    Regards,

    Richard

  •  8,996
    Tahir replied
    December 17, 2016 at 3:19pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 1000px) and (min-width: 1px) {
/*     make image always show full in mobile screen */
    .mobile-video-image {
        background-size: contain;
        -moz-background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Richard replied
    December 18, 2016 at 5:48pm

    Thanks! The image is okay, but unfortunatley it now also shos the padding I needed to create for the backgroundvideo. Can the padding be removed only on the mobile screen?

    Regards,


    Richard

  •  8,996
    Tahir replied
    December 19, 2016 at 3:39pm

    Hey Again,

    You will have to add a Extra Class to that row and then use this custom css : 


    @media only screen and (max-width: 1000px) and (min-width: 1px) {
/*     make image always show full in mobile screen */
   .extra-class-name .mobile-video-image {
        background-size: contain;
        -moz-background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
    }
    .extra-class-name{
        padding:0px !important;
    }
}

    Thanks


    ThemeNectar Support Team