2011-08-26 16 views
38

Tengo un div y aplico :before y :after una imagen como contenido. Eso funciona perfectamente. Ahora necesitaría aplicar una imagen de fondo para que se repita cuando cambie el tamaño de div, pero parece que no funciona. ¿Se supone que la imagen de fondo en :before y :after está funcionando?: antes y background-image ... ¿debería funcionar?

El código actual:

HTML:

<div id="videos-part">test</div> 

CSS:

#videos-part{ 
    background-color: #fff; 
    height: 127px; 
    width: 764px; 
    margin: -6px 0 -1px 18px; 
    position: relative; 
} 
#videos-part:before{ 
    width: 16px; 
    content: " "; 
    background-image: url(/img/border-left3.png); 
    position: absolute; 
    left: -16px; 
    top: -6px; 
} 
+2

pegar su código en su pregunta. – BoltClock

+0

Actualicé la pregunta con mi código – Michi

+2

Mi problema faltaba 'content'. Necesita tener algún contenido para aplicar el fondo. – Neolisk

Respuesta

54

@michi; definir height en su pseudo clase before

CSS:

#videos-part:before{ 
    width: 16px; 
    content: " "; 
    background-image: url(/img/border-left3.png); 
    position: absolute; 
    left: -16px; 
    top: -6px; 
    height:20px; 
} 
+0

Hola Sandeep ... No puedo usar la altura ya que el div cambiará de tamaño dependiendo de su contenido. – Michi

+0

Hmm ... Solo traté de poner la altura y aparece la imagen de fondo :-(¿De verdad tendré que usar JS para cambiar la altura de forma dinámica? – Michi

+1

Acabo de agregar la altura: 100% y funciona :-) Me estúpido No he pensado en eso antes. Muchas gracias Sandeep :-) – Michi

4

imágenes de fondo en :before y :after elementos debería funcionar. Si publica un ejemplo, probablemente podría decirle por qué no funciona en su caso.

Aquí es un ejemplo: http://jsfiddle.net/namas/3/

Puede especificar las dimensiones del elemento en% mediante el uso de background-size: 100% 100% (ancho/alto), por ejemplo.

+0

Hola, Meo, actualicé mi pregunta con el código que estoy usando. Gracias por ayudarnos :-) – Michi

Cuestiones relacionadas