Background Problems

  • Profile Image
    bdewitt
    Asked on December 19, 2012 at 12:28 AM

    I would like the background image I have loaded to cover the entire background of the form and if the form had the ability to scroll would like to let the image scroll with the form. I have been playing with this for about an hour and can't seem to figure it out. Please help.

  • Profile Image
    fxr
    Answered on December 19, 2012 at 02:21 AM

    You can try injecting this CSS:

     

    {
    background-image:url('http://myimage.com/img.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

    Just edit the url to the location of your background image file.

  • Profile Image
    abajan
    Answered on December 19, 2012 at 03:20 AM

    @bdewitt

    Having cloned your form and examined its injected CSS, I discovered that you just need to add fixed to the background declaration, as highlighted below:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    color: #FFF;
    margin: 0;
    padding: 0;
    }

    When done, the form should work like this one.

  • Profile Image
    abajan
    Answered on December 19, 2012 at 04:02 AM

    Incidentally, if you want the labels and sub-labels to be white, remove the color: #FFF declaration from the body, html rule and place it in a new rule whose selector is label, .form-sub-label:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    margin: 0;
    padding: 0;
    }

    label, .form-sub-label {
    color: #FFF;
    }

    This has the added benefit of not making the form builder's text white!

    If you want to style the sub-labels separately:

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    margin: 0;
    padding: 0;
    }

    label {
    color: #FFF;
    }

    .form-sub-label {
    color: #000;
    }

    Ideally, both the labels and sub-labels should be white with black drop shadows, as in this form but text-shadow is a CSS3 property and as such, would have no effect in many older browsers. More importantly, it's not supported in any version of Internet Explorer, according to these tables. So, even though it looks cool, I would advise against using it for the forseeable future.

  • Profile Image
    bdewitt
    Answered on December 19, 2012 at 10:16 PM

    body, html {
    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) no-repeat fixed;
    color: #FFF;
    margin: 0;
    padding: 0;
    }

     

    I used this CSS you suggeested but the page still doesn't look right. There is a large area on the right side of the screen that is just white..Thank you for all your suggestions though

  • Profile Image
    idarktech
    Answered on December 19, 2012 at 11:43 PM

    @bdewitt

    It is because your image dimension isn't enough to cover the whole page. You can however stretch your background image to cover the white area. Use this:

    body, html {

    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) repeat fixed;

    color: #FFF;

    margin: 0;

    padding: 0;

    -webkit-background-size: cover; /*for webKit*/

    -moz-background-size: cover; /*Mozilla*/

    -o-background-size: cover; /*opera*/

    background-size: cover; /*generic*/

    }

    Thanks!

  • Profile Image
    abajan
    Answered on December 20, 2012 at 04:40 AM

    @bdewitt

    I should have realized you meant for the image to cover the entire background of the page. Anyway, idarktech's solution works great. Here's some additional information on the background-size property.

    Have fun!

  • Profile Image
    abajan
    Answered on December 20, 2012 at 04:42 AM

    Arghh! Wrong link. Here's the right one.

  • Profile Image
    abajan
    Answered on December 20, 2012 at 04:45 AM

    LOL

    Okay, let me try this again.

    Success!