Estoy tratando de crear un div que tendrá un ancho fijo y una altura flexible, aquí es el imagen que quiero usar para el fondo. El problema es que cuando tengo div más grande que la altura de la imagen, se omiten las esquinas redondeadas inferiores y también si tengo div menor que el tamaño de la misma imagen, ¿cómo hago que esto funcione con esquinas redondeadas con todos los tamaños? Gracias

1
Gandalf StormCrow 4 dic. 2009 a las 12:18

3 respuestas

La mejor respuesta

Simplemente use una parte inferior de su imagen, otras con estilo de borde.

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
         <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
          Some Content
         </div> 
    </div>

Si necesita un borde redondo en la parte superior, simplemente agregue el estilo "fondo" a #myContent con la alineación superior y otra imagen.

1
Coyod 4 dic. 2009 a las 09:58

Coloque la imagen de fondo en la parte inferior y agregue un poco de relleno en la parte inferior del div para que las esquinas encajen en eso. Haz que la imagen bg sea realmente alta.

0
matpol 4 dic. 2009 a las 09:23

El uso de la posición de fondo asegurará que siempre tenga esquinas redondeadas:

Css:

background-position:bottom;

Tendrás que crear una imagen que tenga mucha altura extra para que si el div termina siendo más alto de lo esperado, siempre tendrás espacio para jugar.

Otra opción sería dividir el div en 2 divs separados: 1 como sección de contenido principal y el otro simplemente agregando las esquinas curvas en la parte inferior. Esto le permitirá utilizar una imagen de fondo de 1px de alto para el div principal, y una imagen de 20px (ish) para la imagen de borde curvo, reduciendo bastante el tamaño del archivo. Adjunto un ejemplo para usted: Descargar el ejemplo

1
BenTheDesigner 4 dic. 2009 a las 09:44