What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Background of two colours using CSS code.

    Asked by brssi_exam on November 18, 2014 at 07:55 AM

    Hi;

    In this given form you can see that the background is actually an image where above portion (with particular height and width) is blue and rest of the portion is very light blue (with particular height and width).

     

    My question is that is it possible to make this type of background using html code/CSS code where I can combine two separate colour (not mixing)?

    And please provide me the html code (If possible) for marquee behavior for UP direction. Because the ticker is proving us only left and right direction and it is not showing in mobile device.

     

    Please help me… I am new user in jotform. 

    Page URL:
    http://www.jotform.me/bkp.success/14

    css code JotForm two color background CSS
  • Profile Image
    JotForm Support

    Answered by jonathan on November 18, 2014 at 08:53 AM

    Hi,

    Can you confirm that what you wanted to have is a form background color that are split into 2 parts?

    On your jotform http://www.jotform.me/form/40211606300434 you can achieve that by giving the form a background color (light-blue) and then the header color (blue).

    This will result in the form having 2 background colors split to 2.

    Please tell us if my understanding of what you want to achieve is correct and we will check how to apply the solution.

    Thanks.

     

  • Profile Image

    Answered by bkp.success on November 18, 2014 at 09:08 AM

    Hello jonathan;

    this background colour is made by an image containing two colour and here the css code used 

    body, html{background: url('http://www.jotform.com/uploads/bkp.success/form_files/brssi_bg_nov11_2.png') repeat;height: 100%;}

    something like that. but I want to achieve this same requirement without uploading any image/taking URL of the image. I want to do this same thing using html colour code. 

    In jotform you have the background colour facility using colour code but it only contain one single colour all over the form. but I want to separate colours (more than 1) like this form using this colour code process.

    I hope I am able to make my requirement clear.  

    Please accept my apologies for little information.

    And 

    please provide me the html code (If possible) for marquee behavior for UP direction.
    Because the ticker is proving us only left and right direction and it is not showing in mobile device.
  • Profile Image
    JotForm Support

    Answered by abajan on November 18, 2014 at 10:39 AM

    Assuming you are referring to this image whose URL is actually

    http://www.jotform.com/uploads/bkp.success/form_files/2014_1.png

    and you wanted to use CSS to achieve the same result with just colors and no images, my research (see this StackOverflow thread) suggests that while it can be done, most browsers don't support the technique shown here. We might be able to devise a workaround but I'm not making any promises.

    The discussion on the marquee issue has been moved to another thread: http://www.jotform.com/answers/460841

    Thanks

  • Profile Image

    Answered by brssi_exam on November 19, 2014 at 03:39 AM

    Hi abajan,

    I want to apply it in jotfom but I can not understand how to use it. please help me by simplifying this code and inform me how to use t in jotfom and please inform me in which browser it will be supported.
    ( http://stackoverflow.com/questions/6457406/can-i-apply-multiple-background-colors-with-css3 )

    myDiv { position: relative; /*Parent MUST be relative*/ z-index: 9; background: green;/*Set width/height of the div in 'parent'*/ width:100px; height:100px; }.myDiv:before { content: ""; position: absolute;/*set 'child' to be absolute*/ z-index: -1; /*Make this lower so text appears in front*//*You can choose to align it left, right, top or bottom here*/ top: 0; right:0; bottom: 60%; left: 0;background: red; }

     

    <div class="myDiv">this is my div with multiple colours. It work's with text too!

     

  • Profile Image
    JotForm Support

    Answered by abajan on November 19, 2014 at 08:06 AM

    Hi again,

    Please have a look at this clone of your jotform. No background image is used. Instead, like my colleague Jonathan had stated, a light-blue background was applied to the entire "form" (via the Background tool). The only difference was that I used an empty text element. I replaced the injected CSS with the following:

    .form-all {
    padding-top: 0;
    }

    #id_202 {
    position: absolute;
    background: #2639E6;
    width: 100%;
    height: 78px;
    }

    #text_197 {
    overflow: auto;
    height: 188px;
    width: 509px;
    }

    #text_183 {
    overflow: auto;
    height: 304px;
    width: 600px;
    }

    a:link {
    color: #0000FF;
    text-decoration: none;
    }

    a:hover {
    color: #00F;
    text-decoration: underline;
    }

    a:visited {
    color: #00F;
    text-decoration: none;
    }

    @media print {
    * { display: none; }
    }

    The rule highlighted in red targets the empty text element.

    Is this what you wanted to achieve?

  • Profile Image

    Answered by brssi_exam on November 19, 2014 at 11:26 AM

    Hi again,

    Thanks a lot Jonathan and abajan for your team support. and this is exactly what i want. But in this CSS

    #id_202 {
    position: absolute;
    background: #2639E6;
    width: 100%;
    height: 78px;
    }

    code i have a problem with the width parameter. because my form width is 1165px so, the blue header sets in this range only. but I want to set it as the device (desktop, laptop etc and not mandatory in mobile devices) screen width (covering left and right portion of the screen without changing my form width or make it responsive). I am giving an example http://www.jotform.me/bkp.success/14 where you can see that only the background (which is set as image) colour (blue and light blue) are covering the left and right portion of the form according to screen size. 

    Again thanks to all of you and if it is not possible by using CSS code then please inform me in this page.

  • Profile Image
    JotForm Support

    Answered by david on November 19, 2014 at 12:24 PM

    Hi,

      Though our team members are making a great deal of effort to try to assist you with this form, I believe this is quickly stepping beyond what our support is for.  There are several website builders that can help you with building actual websites, however assisting you with custom CSS to build essentially a whole web page within a form may be a bit out of our scope.  We are happy to help you with technical issues or basic questions, however this is quickly turning in to web development, which is not what our forms are intended for.