Agregar imagen de fondo e imagen de borde al formulario

Tengo un formulario simple basado en jquery -

<center>
    <form id="form1">
    <div id="registerDiv" data-role="fieldcontain" >    
     <input type="button" value="Register" id="registerButton" data-inline="true"/>
    </div>
    </form>
  </center>

Me gustaría modificar el formulario para que tenga dos imágenes de fondo, un fondo cubre el botón (número 1 en adjunto - layout.png), el segundo es una imagen de fondo que actúa como borde (número 2 en adjunto - layout.png) ). ¿Cuál es el mejor método para lograrlo?

Muchas Graciasenter image description here

preguntado el 16 de mayo de 11 a las 20:05

2 Respuestas

Creo que todo lo que estás buscando es esto:

#form1 { 
    background: url( /images/background1.jpg ) no-repeat;
}

#registerDiv {
    margin: 40px;
    background: url( /images/background2.jpg ) no-repeat;
}

contestado el 17 de mayo de 11 a las 00:05

Gracias, solo necesito un pequeño ajuste, ¿cómo puedo modificar el tamaño de los márgenes izquierdo, superior, derecho e inferior individualmente? - user701254

un poco perezoso de mi parte preguntando eso;) - margin-bottom: 5%; margen superior: 10%; margen izquierdo: 10%; margen derecho: 10%; - user701254

CSS:

<style type="text/css">
  .outer {background:url(layout-outer.png);padding:12px}
  .inner {background:url(layout-inner.png);padding:12px}
</style>

HTML:

<div class="outer">
  <form id="form1">
    <div class="inner">
      <!-- other input items as necessary -->
      <input type="button" value="register" id="registerButton" data-inline="true" />
    </div>
  </form>
</div>

La parte clave aquí es la cantidad de relleno en '.outer'. Este es básicamente el ancho de su borde.

contestado el 17 de mayo de 11 a las 00:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.