Posicionar una imagen desde abajo

Tengo una imagen que debe colocarse cerca de la parte inferior de la pantalla. Tengo una imagen principal que es la imagen de fondo y cambiará de tamaño con el tamaño del navegador. Necesito que la imagen sobre la imagen de fondo sea de 20 a 30 px desde la parte inferior, sin importar el tamaño de la pantalla o si se cambia el tamaño de la pantalla. (La imagen también debe estar centrada).

No estoy seguro de cómo hacer esto. ¿Cuál es la mejor manera de hacer esto?

Aquí está el código que he probado:

.bottom{
  position:absolute;
  margin-left: -355px; /* Image is 710 in width */
  left:50%;
  bottom:-20px;
 }

Ese código tiene la imagen centrada en la página correctamente pero no a 20px de la parte inferior. También tengo contenido debajo de la imagen y quiero que el contenido permanezca debajo de la imagen, pero actualmente aparece sobre la imagen.

HTML:

 <img class="bottom" src="src-path.png" alt="Text" />

 <p style="clear:both;">&nbsp;</p>

 <!-- More Content here that consist of img and p tags. --> 

preguntado el 04 de julio de 12 a las 06:07

Algún código por favor. Tratar jsfiddle.net -

publique su código css y html ...... -

@RohitAzad - Código agregado. -

Se te acerca usando el posicionamiento absoluto, -

3 Respuestas

Supongo que para colocar la imagen 20-30 px desde la parte inferior, puede usar la propiedad css

margin-bottom:30px; o 20px, el valor que más le convenga. para alinear en el centro vertical-align:middle Por favor, comparta el código para que la cosa sea más clara. Espero haber respondido correctamente.

CSS Together debe verse como: -

margin-bottom:30px;
vertical-align:middle;

Respondido 04 Jul 12, 06:07

Dado que la imagen que desea colocar ya se encuentra en el pie de página, este ajuste no debe ser un problema. - Shiv Kumar Ganesh

@Lynda Mira este violín, espero que esto sea lo que estás buscando jsfiddle.net/LvfbP simplemente ajuste el margen izquierdo en consecuencia - Shiv Kumar Ganesh

@Lynda Si quieres el para avanzar luego inclúyalo dentro del - Shiv Kumar Ganesh

Es mejor que utilice un archivo CSS, en el que declara un pie de página en la parte inferior de su página. Luego coloque su imagen en su página, con la clase de ese CSS y la identificación de "pie de página". ¿Bastante claro?

Respondido 04 Jul 12, 07:07

Veo que ya has probado lo que te sugerí. Para la parte de texto, también debe asignarlos al fondo. Y no use absoluto si desea que su imagen esté en algún lugar fijo, ya sea que la página esté maximizada o normal. - Matin Kh

Esta es la forma en que finalmente hice esto:

CSS:

.image_block    {
  /* Size of image is where the width/height come from */
   width: 710px;
   height: 500px;
}

.image_block a  {
   width: 100%;
   text-align: center;
   position: absolute;
   bottom: 0px;
}

.image_block img    {
   /*Nothing Specified */ 
}

HTML:

<div class="image_block">
   <a href="#"><img src="src.png" alt="Alt Text" /></a>
</div>

Respondido 04 Jul 12, 17:07

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