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

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 

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

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?

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.

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

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.

Kabbagehome.com

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.

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

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