How do I stretch the background image of my contact form to full width

  • Profile Image
    nickius
    Asked on August 18, 2016 at 06:31 AM
    Also, how do i stetch the background image of my contact form to full width. I tried using jotform-form: width 100%  but it did t work. Im using the brick template for my form. Kabbagehome.com Thank you 
  • Profile Image
    Boris
    Answered on August 18, 2016 at 06:41 AM

    Please try adding the following custom CSS to your form:

    .supernova {
        background-image: url("https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg")!important;
        background-size: cover !important;
    }

    You can add CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The above CSS code should make your embedded form appear like this:

    Please let us know how it goes, or if any additional tweaks are needed. Cheers

  • Profile Image
    nickius
    Answered on August 18, 2016 at 10:36 PM

    Okay, but I need the image to cover the full width of my website. What css command should I use for the image to cover the whole page?

  • Profile Image
    beril
    Answered on August 19, 2016 at 03:05 AM

    The CSS code that provided by my colleague covers the whole page. In addition to that, you can also try the CSS code below:

      .supernova {

      background: url("https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg") no-repeat center center fixed; 

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

    }

     

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image
    nickius
    Answered on August 19, 2016 at 03:13 AM

    The image still doesn't cover the whole width of the page. The are white spaces on both sides of the webpage. 

  • Profile Image
    beril
    Answered on August 19, 2016 at 04:42 AM

    Thank you for providing the screenshot of your issue. Could you please indicate the URL of your page? This will help us better analyze the problem. We will wait for your response.

  • Profile Image
    nickius
    Answered on August 19, 2016 at 01:12 PM

    Kabbagehome.com

  • Profile Image
    EltonCris
    Answered on August 19, 2016 at 02:47 PM

    I checked your website and the form is properly embedded in your page.

    However, the spacing you see around the form is part of the container style in your page not with the form. This container has a fixed width of 960px and it is centered on the page. Since the embedded form is under this container, the form width can't go beyond its container width.

    Here's a visual image that shows the width of the div element with class .container where the form is embedded.

    The easiest way to resolve this is to edit the container width in your website main_style.css file from 960px to 100% under .container class. You can ask your web developer to do this if you are not familiar with editing your website CSS.

    If you have more questions, let us know.

  • Profile Image
    nickius
    Answered on August 19, 2016 at 05:09 PM

    Thank you. How Can I gain access to the main_style.css file?

  • Profile Image
    david
    Answered on August 19, 2016 at 06:42 PM

    The file should be hosted on the server where your website is hosted.  It is not something we will have access to.