Theme changed on picture

  • Profile Image
    Hangchanleakna
    Asked on March 27, 2019 at 01:03 AM

    Hi , I like the theme so much  , Can i replace with my photo instead ? and how to process this ? 1553662944Circle-Coke-Flip.png


    15536622791.PNG


  • Profile Image
    Victoria_K
    Answered on March 27, 2019 at 05:00 AM

    It is possible to change background image via CSS. But, please note that it would not look exactly the same as theme's image. That's because background you provided is greater in height. 

    You can try this CSS code: 

    How-to-Inject-Custom-CSS-Codes

    html.supernova {

      background-image: url(https://www.jotform.com/uploads/forum/Hangchanleakna/1553662944Circle-Coke-Flip.png);

      background-size: 100%;

      background-attachment: scroll !important;

    }

    Test form: https://www.jotform.com/90852705030955 

    Let us know if you need more help. 

  • Profile Image
    Hangchanleakna
    Answered on March 27, 2019 at 06:45 AM

    hi , when i scroll down , the background image also move , means the image is not stand still , 

    and the other thing is the image seems not fit with to the bottom form , 

    it still has white appear. 

    what should i do to achieve this ? 

    anw how can i have URL of the image ? html.supernova {

      background-image: url(https://www.jotform.com/uploads/forum/Hangchanleakna/1553662944Circle-Coke-Flip.png);

      background-size: 100%;

      background-attachment: scroll !important;

    }

  • Profile Image
    Victoria_K
    Answered on March 27, 2019 at 07:53 AM

    In order to get URL of the image, you can upload it anywhere. For example, you can upload the image to the imgur.com, then get the direct image URL, and add it to the code. 

    You can set the image as fixed background, so it did not scroll:

    html.supernova {

      background-image: url(https://www.jotform.com/uploads/forum/Hangchanleakna/1553662944Circle-Coke-Flip.png);

      background-size: 100%;

      background-attachment: fixed !important;

    }

    But, because of the height difference, image will not be shown in full. 

    We can try other options if you share how you would like to position this image.

  • Profile Image
    Hangchanleakna
    Answered on March 27, 2019 at 09:32 AM

    Hi , since my users willl open the link on phone . Can u make sure the picture are there to fit with phone ? And the image is not move ?

  • Profile Image
    Victoria_K
    Answered on March 27, 2019 at 11:35 AM

    This is the code I can suggest:

    html.supernova {

      background-image: url(https://www.jotform.com/uploads/forum/Hangchanleakna/1553662944Circle-Coke-Flip.png);

      background-attachment: fixed !important;

      -webkit-background-size: auto;

      -moz-background-size: auto;

      -o-background-size: auto;

      background-size: cover;

    }

    And test form: https://www.jotform.com/90852848610967 

  • Profile Image
    Hangchanleakna
    Answered on March 28, 2019 at 12:03 AM

    i have used this , my comment is , If we can zoom the picture to fit with phone , that would be much better , while the other sides of picture cut off. 


    thx 

  • Profile Image
    jherwin
    Answered on March 28, 2019 at 03:34 AM

    Please try injecting this custom CSS code to fit the whole image if it's viewed using mobile.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
      html.supernova {
      background-image: url(https://www.jotform.com/uploads/forum/Hangchanleakna/1553662944Circle-Coke-Flip.png);
      background-attachment: fixed !important;
      -webkit-background-size: auto;
      -moz-background-size: auto;
      -o-background-size: auto;
       background-size : 100% 100% !important;
       background-repeat : no-repeat !important;
       width : 100% !important;
    }}

    Guide: How to Inject Custom CSS Codes

  • Profile Image
    Hangchanleakna
    Answered on March 28, 2019 at 04:20 AM

    hi , thanks for your time :) . it's really good :D 

    but i better use the last one since the image seems so zoom in which is lost the shape of it. 


    thx you anw