Obtener una imagen de fondo para mostrar en un elemento div en blanco

Estoy buscando utilizar un elemento div en blanco para mostrar una imagen de fondo pero no se muestra nada a menos que coloque algo (es decir, texto) en el elemento div.Obtener una imagen de fondo para mostrar en un elemento div en blanco

Necesito hacer esto porque quiero mostrar un gráfico al lado de un texto pero tengo el gráfico alineado verticalmente con el texto.

¿Cómo se obtiene una imagen de fondo para mostrar en un div en blanco?

Mi Google-fu me ha fallado.

<div class="photoInfo"> 
lorem ipsum | 
<div style="background:url('foo.gif') no-repeat;display:inline;"></div> 
</div>

¡Gracias!

editar: El siguiente código muestra realmente la imagen, pero solo tengo que anclarla como 2 o 3 píxeles para que quede perfectamente alineada.

Eso es lo que intento lograr, ¿alguna idea?

<div class="photoInfo"> 
    Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels 
    <span class="spacer">•</span> 
    <img src="/_assets/img/icons/new-photo-small.gif" /> 
</div> 
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>--> 

.photoInfo 
{ 
font-size:0.6em; 
color:#b0bad9; 
padding-bottom:15px; 
text-align:center; 
}

Fuente

2009-04-02 Tom

lol, Google-fu: D – chosta

Haga esto!

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three

Si utiliza un div en lugar de span, tendrá que establecer display: inline en el estilo también.

Fuente

2009-04-02 19:44:43 jyustman

Si elimino la pantalla: elemento en línea, el elemento div no se muestra en la misma línea que el texto con el que intento alinearlo. – Tom

Tiene razón, lo actualicé con un método que funcionará para usted. (¿Debería haber agregado otra respuesta en su lugar?) – jyustman

Eso funcionará pero el texto "dos" muestra, creo que podría hacer que el texto tenga el mismo color que el fondo. – Tom

El fondo debe estar en el photoInfo div, y se puede posicionar con background-position. No puede tener un fondo en algo que es 0 de alto y ancho. Si lo aumentas, ocupará espacio en tu diseño.

Fuente

2009-04-02 19:38:48 Shawn

lo he intentado también. El elemento div de photoInfo es el 100% del ancho de mi contenedor, por lo que si especifico no repetir e izquierda o derecha, estará en el extremo izquierdo o derecho de la pantalla mientras el texto esté centrado. Lo necesito directamente a la derecha del texto centrado. – Tom

overflow:hidden podría ayudar o asignar una longitud y un ancho a la div.

En general, creo que hay otras formas de lograr lo que desea. Si solo desea tener un texto y una imagen alineados horizontalmente, puede hacerlo sin poner la imagen en div. Por ejemplo, puede usar inline y float.

Fuente

2009-04-02 19:39:10 markus

El problema es que el texto está en un elemento div que es el 100% del ancho del contenedor de la pantalla.El texto también está centrado y necesito la imagen directamente a la derecha del texto, alineada verticalmente. Flotar en L o R no ayudará y agregar relleno o un margen en el estilo de imagen o la imagen en sí ... – Tom

... tampoco funciona, ya que empuja todo hacia abajo. – Tom

luego envuelva el texto y la imagen dentro de un div que luego se centra en la página – markus

Tienes que darle un tamaño a la div, de lo contrario su tamaño es 0px x 0px.

Fuente

2009-04-02 19:39:23 Mork0075

He intentado darle al div las dimensiones de la imagen y eso no funciona. – Tom

Cheap work-aroound. poner un espacio sin interrupción (& nbsp;) en el div.

Fuente

2009-04-02 19:39:26 tpdi

Sí, lo intenté en vano. – Tom

Si no quiere ningún texto, esto funciona en Safari y Firefox (no probar IE):

one | <span style="padding: 16px 16px 0 0; background: url('16x16-image.gif') no-repeat; font-size: 0"> </span> | three

Fuente

2009-04-02 20:20:37 jyustman

¿Estás tratando de mover la imagen de fondo sin mover el div?

Trate background-position: xpos ypos;

Para moverlo hacia abajo 3 píxeles: background-position: 0px 3px;

Fuente

2009-04-03 01:25:11

Obtener una imagen de fondo para mostrar en un elemento div en blanco

Respuesta

Cuestiones relacionadas