HTML Form Question

Is it possible to give form elements a background image instead of the usual one color?

Yeah. Here’s a document from the MS Developers’ Network all about what you can do with backgrounds using CSS.

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/background_0.asp

According to TopStyle Pro, these background attributes work across all browsers but you will have to test to find out for sure (or consult the W3C).

Thanks, but I have no clue on how to implement that :wink:

Interesting that the examples they give all contain this disclaimer …

“This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.”

I use Opera.

I saw nothing. :slight_smile:

Oh, my bad, I thought the examples in the link would be all right for ya. Here’s some help.

Put this in the HEAD of your document:

To explain, this would make the background of any element with the class “bluebackground” have a solid blue background (for browsers that don’t support bg image), an image bg of the file “images/bluebg.jpg”, which would be repeated (assuming it’s a small graphic. it’s just like a page background image) and it would be fixed with the scroll bar (if it were in a textarea).

So you can do anything along the lines of:

.classname { background:
color (can be hex or color name)
url(image.jpg) (path to image relative to your document)
repeat OR no-repeat OR repeat-x(repeats horizontally) OR repeat-y(repeats vertically)
attachment (either scroll(default) or fixed(stays at the top))
position (see the link on the page i gave before for backgroundPosition info)
}

Just make sure it is on one line, like the above example in quotes.

To apply this class to a form element, do it like so:

I don’t know what browsers this works in and I dont’ care :stuck_out_tongue:

Dunderdude2, fair warning: People do not like being told they have to switch browser just to look at your website, or missing content just because they aren’t using the Approved Browser to render the page. These people think HTML and CSS should be platform-independent, and not care what OS or browser the end-user is using. As non-Microsoft OSes and browsers grow more common, tolerance for browser-specific pages will drop to nil.

Viewable with Any Browser Campaign – Good resource for designing web pages correctly.

You wish! I don’t see that happening any time soon. Considering in little more than three years IE has gone from 40% popularity* to about 98%.

[sub]*I am using the word ‘popularity’ in the sense of ‘being used’.[/sub]

Hear hear. You gotta make the site cross-browser compatible. It’s a pain in the ass, but it’s gotta be done.

That may be true, but you need to consider other factors as well. Not to get to far OT or into GD territory, but a huge proportion of people who use IE do so because it’s installed and they never consider the alternatives (i.e. they’re sheep). People who use alternative browsers usually do so because they’ve considered the options based on functionality, security, ease of use, etc. The latter group will tend to have a disproportionate influence on technical matters and general industry opinion.

If you’re selling something, do you really want to alienate any percentage of your potential customers just to gain some shiny bauble in your layout? If you’re trying to reach a group which is even mildly tech saavy, your audience is going to be heavily weighted with non-IE users and your problems are only compounded. It all comes down to a balance between getting the exact display you want versus how many people you can afford to block.

BTW, I use Opera and everyone in my organization knows they’ll get very little slack if they choose to use IE, Outlook, etc. and then get bit by the myriad flaws, holes, and exploits. I don’t tell them what to use, but I require that they make an informed decision. Guess how many IE users there are among my employees, clients, and friends. 98%? Think again.