Haga que la imagen vaya detrás del texto y manténgala en el centro usando css

Estoy creando una página web, donde tengo una imagen, que quiero colocar en el centro y luego en la parte superior de esa imagen quiero ingresar cajas y etiquetas y botón de enviar.Haga que la imagen vaya detrás del texto y manténgala en el centro usando css

estoy tratando de utilizar el css

img.center 
{ 
    z-index:-1; 
}

pero esto no funciona. y cuando cambio el código para

img.center 
{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:-1; 
}

si hacer que la imagen vaya detrás, pero entonces como antes y left:0pxtop:0px ... se pone la imagen en loaction 0,0 .. pero quiero la imagen para quedarse en el centro.

para mantener la imagen en el centro tengo <div align="center"> etiqueta.

hay de todos modos, puedo mantener la imagen en el centro y hacerla ir atrás también?

Mi página html es el siguiente: (i me trató de tener una imagen de fondo para mi etiqueta div, pero ninguna imagen está apareciendo por allí)

<html> 
<head> 
<title>Question of the Week</title> 
<style type="text/css"> 
    body 
    { 
     background-image:url('images/background.jpg'); 
     background-repeat:repeat-x; 
    } 

    .container 
    { 
    background-image:url('images/center.jpg'); 
    background-repeat:no-repeat; 
    } 
    td.cntr {padding-top:50px;} 
</style> 
</head> 
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> 

    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td><div align="left"><img src="images/logo.jpg"></div></td> 
        <td></td> 
        <td><div align="right"><img src="images/right_logo.jpg"></div></td></tr> 
      </table> 
     </tr> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="cntr"> 
         <div id="container"> 
          <input name="box" type="textbox" /> 
          <input name="box" type="textbox" /> 
          <input name="submit" type="submit" /> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </tr> 
    </table> 
</body> 
</html>

Fuente

2009-07-07 Zeeshan Rang

¿Se puede compartir el código HTML? Cómo se configura el HTML tendrá un gran efecto sobre qué CSS es necesario. –

Bueno, ponga su imagen en la parte trasera de su sitio web/contenedor y coloque lo que desee además de eso. Así que decir tiene:

<div id="container"> 
    <input name="box" type="textbox" /> 
    <input name="box" type="textbox" /> 
    <input name="submit" type="submit" /> 
</div>

Ésta es estar en su código y CSS sería el resultado:

#container { 
    background-image:url(yourimage.jpg); 
    background-position:center; 
    width:700px; 
    height:400px; 
}

Para que esto funcione aunque, debe tener la altura y la anchura especificada a ciertos valores (es decir, no% 's) Te podría ayudar más específicamente si lo necesitaras, pero necesitaría más información.

Fuente

2009-07-07 18:39:24 Mike

probar este código:

body {z-index:0} 
img.center {z-index:-1; margin-left:auto; margin-right:auto}

Al configurar el margen izquierdo & en el centro debe centrar su imagen.

Fuente

2009-07-07 18:26:13

No debe usar un índice z negativo porque no todos los navegadores lo admiten correctamente. –

Puede colocar tanto la imagen como el texto con position:absolute o position:relative. Entonces el z-index property funcionará. P.ej.

#sometext { 
    position:absolute; 
    z-index:1; 

} 
image.center { 
    position:absolute; 
    z-index:0; 
}

Utilice el método que desee para centrarlo.

Otra opción/hack es hacer que la imagen sea el fondo, ya sea en toda la página o solo dentro del cuadro de texto.

Fuente

2009-07-07 18:30:34 anderstornvig

Haz que sea una imagen de fondo centrada.

.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;} 

<div class="wrapper"> 
...input boxes and labels and submit button here 
</div>

Fuente

2009-07-07 18:34:59 Emily

probé tu código ... pero no funcionó. he editado mi pregunta con mi código ... podría echarle un vistazo ... otra vez –

Tiene id = 'contenedor' pero está usando .container que es para una clase. O use class = 'contenedor' en el html o #container en el CSS. También te falta la posición de fondo: centro en el CSS. Puedes poner todo el CSS de fondo en una línea como en mi ejemplo anterior. – Emily

Es una pena que te hayas quedado corto en este caso): –

Comience en 0 y suba desde allí, en lugar de usar -1. Por ejemplo, configure el div que contiene sus entradas y etiquetas en un índice z de 100 y proporcione un índice z de 50 a la imagen que desea colocar detrás de él.

Como alternativa, simplemente configure la imagen como imagen de fondo del div que contiene las entradas y las etiquetas. Dado que la imagen es probablemente ilustrativa y por lo tanto presentacional, en realidad no necesita ser un elemento img real.

Fuente

2009-07-07 18:35:26 Rahul

Hay dos formas de manejar esto.

imagen de fondo
Usar la propiedad z-index de la imagen de fondo CSS

es probablemente más fácil. Necesitas un ancho fijo en alguna parte.

.background-image { 
    width: 400px; 
    background: url(background.png) 50% 50%; 
}

<div class=".background-image"><form></form></div>

Fuente

2012-04-04 20:16:13

Haga que la imagen vaya detrás del texto y manténgala en el centro usando css

Respuesta

Cuestiones relacionadas