(CSS) CSS: Submit Button Background Images - karlhorky

Sat, 10 Jul 2010 08:45:15 GMT

There are three different types of elements that submit forms: * <input type="image"> * <input type="submit"> * <button type="submit"> Logically, it would seem that you would want to use input type="image" if you wanted to display an image instead of a default button. However, using input type="image" causes the page to submit two extra variables for your x and y mouse click coordinates on the image as below. Unless you are specifically using this for advertising or some purpose that takes advantage of the coordinates, this is just unnecessary data that also causes the URL to become more complex. Example URLs: * type="submit" * http://www.site.com/form.php?query=searchterm * type="image" * http://www.site.com/form.php?query=searchterm&x=0&y=0 Additionally, if you do not require additional information pertaining to the submit to be passed to the server (eg. you do not need to have two submits with different purposes), you can use a button element instead of an input. This also allows for simple hiding of the display text as outlined with the .hide-text class in this snippet (for if you wanted to put the text in the image instead). This solution has been tested to work in: * Microsoft Internet Explorer 6, 7, 8 * Mozilla Firefox 3.6 * Google Chrome 5 * Apple Safari 5 * Opera 10

(CSS) Perfect Full Page Background Image - paulgrenwood

Wed, 23 Sep 2009 15:41:04 GMT

This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image. This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals. WORKS WITH IE7+

Snipplr

(CSS) CSS: Submit Button Background Images - karlhorky

(CSS) Perfect Full Page Background Image - paulgrenwood