PDA

View Full Version : Fields overlapping CSS background image



mastachef
3 Feb 2012, 8:51 AM
Hello all. I am trying to add a background image to a form to indicate that the data the user is looking is stale. I am able to produce the image, however I am not able to get around a few issues.

a) The background is being displayed but is seems to be 'underneath' the fields.
b) No matter what options I define in my CSS class, the image is still repeating and I am not able to stretch it to be larger.

I have used FireFox and also the IE 8 web developer to find the parent CSS classes but I am still unable to modify the correct class. I have included an image for review. Any pointers/solution are greatly appreciated. Thank you.

CSS file code


.stale {
background-image: url(../images/stale_data.gif) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}


Javascript code


if(stale == true)
{
//Add background
form.el.addClass('stale');
}
else
{
// Remove background
form.el.removeClass('stale');
}

mitchellsimoens
3 Feb 2012, 9:10 AM
Do the fields have a background color or anything to them?

mastachef
4 Feb 2012, 8:59 AM
The fields have



background-color: #FFFFFF
background-image: none


I have tried to modify the background using but to no avail.



form.el.applyStyles({'background-image: (url: ../images/stale.gif)'});


Is there something I am missing or should be looking at?