textarea background image problem 2

[Dweezel]

I've designed a page that relies on the background image set to a textarea form element remaining fixed if the text being typed in requires to be scrolled.
If you're not sure what I mean by that have a look at the design:

http://www.robhayes.co.uk/WIP/contact.html

Each form element has a background image which is cut to maintain the continuity of the pattern of the paper. If the background of the textarea box scrolls then it ruins the effect.

Firefox and Netscape both allow the text in the textarea element to scroll while the background remains fixed. The problem is with IE. The background image in the textarea box scrolls with the text.

Does anyone know of a work around for this?

The only relevant CSS is the background-image property:

#message{
background-image:url(images/message-backer.jpg);

}

Note: Nothing works on the site yet, not even the form. This is the first page I've done for it. All the CSS is still currently inline and I haven't even designed a footer yet. Wan't to get this problem sorted before moving on.

Any help much appreciated. Cheers.

 

[petey]

Haven't ever tested this, but have you tried making it transparent so the page bg img just shows through?

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Dweezel]

OMG! I can't believe I didn't think of that. <feeble excuse> I was doing this at 1am though </feeble excuse> .

Cheers Petey.

 

[Dweezel]

I've just tried using a transparent gif as a background image for the form elements. Unfortunatly it doesn't work in IE NN or Firefox.

Does anyone have any other ideas?

 

[Vragabond]

I don't think petey meant transparent gif but rather a css property for transparent background:

#message { 
  border: 1px solid rgb(213, 171, 115);
  margin: 3px 0pt 0pt 7px;
  background-color: transparent;
}

It works for me in Mozilla.

 

[Dweezel]

Works like a charm. I didn't realise that setting the color to transparent was possible in CSS.

Many thanks to you both.