Clipping em background com area

[gambas]

Boas,

Tenho uma imagem com icons, e queria poder coloca-la como imagem no fundo de um input de texto a esquerda mas apenas selecionar uma area/rectanglo na imagem que possa ser visible.

Algo como a imagem ter 1000x1000.

E eu apenas querer o rectangulo de 100, 100, 36, 36 (x,y,w,h)

Com background-position sei fazer mas não consigo encontrar nenhum exemplo para fazer o 'clipping'

[HappyHippyHippo]

nem eu  😛 é por isso que se quero usar backgrounds em inputs ele teem de ter um tamanho muito certinho.

ou teem o tamanho exacto do input ou coloca as imagens alinhadas na vertical, fazendo assim que não sejam apresentadas no input (somente a pretendida)

[danielfos]

Vê se era isto.. http://www.imagensclaras.com/teste/

Não sei se cheguei a perceber o que querias fazer 😛

Se fores ver a imagem de fundo (ui_kit.jpg), podes reparar que o fundo do input é uma área dessa imagem grande. E essa área é o tamanho do input, neste caso 169px x 40px . A imagem grande é de 600px x 400px. Usando os valores de background-position, fazes com que a imagem grande se movimente conforme queres.

Neste exemplo, apliquei também um fundo ao input do tipo 'submit'

Abraço!