Background of two colours using CSS code.

  • brssi_exam
    Asked on November 18, 2014 at 7: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. 

  • jonathan
    Replied on November 18, 2014 at 8: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.

     

  • bkp.success
    Replied on November 18, 2014 at 9: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.
  • abajan Jotform Support
    Replied 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

  • brssi_exam
    Replied on November 19, 2014 at 3: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!

     

  • abajan Jotform Support
    Replied on November 19, 2014 at 8: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?

  • brssi_exam
    Replied 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.

  • David JotForm Support
    Replied 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.