Hola a tod@s.
Tengo una web con las tipicas "cajas con bordes redondeados" y hasta ahora todo iba bien, ya que el color de fondo de la página era el mismo que el color de las esquinas de las imágemes que forman cada caja.
Pero ahora quiero poner una imagen de fondo por lo que pensé en hacer transparentes las esquinas de las imágenes para que no se viera así:
Yo pensaba que funcionaría, pero al hacer las esquinas transparentes he visto que la imagen central (caja central) "crece" hacia arriba y hacia abajo mostrando unas líneas que quedan bastante mal:
El Código CSS que uso:
.caja250 {
width: 250px;
background-image: url("centro250.gif");
background-repeat: repeat-y;
}
.cajaarriba250 {
background-image: url("arriba250.gif");
background-position: top center;
background-repeat: no-repeat;
}
.cajaabajo250 {
background-image: url("abajo250.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;
}
El Código HTML:
<div class="caja250">
<div class="cajaarriba250">
<div class="cajaabajo250">
<p style="margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px;">
<?php
include_once "lo que quiera que sea...";
echo $php....;
?></p>
</div>
</div>
</div>
He probado todo lo que se me ocurre y no soy capaz de dar con la solución. No se si tendré algun error de sintaxis (hasta ahora todo se mostraba bien) o tengo que añadir algo al código actual para que gráficamente se muestren bien las esquinas redondas.
Cualquier sugerencia será bienvenida.
Saludos cordiales a esta Comunidad.