samedi 20 septembre 2014

Image en arrière-plan d'un DIV à coins arrondis

Je n'avais pas encore résolu le problème du padding (espace) entre les images d'arrière-plan de DIV et le cadre. C'est résolu en tâtonnant et cherchant un peu. Ci-dessous, en exemple, une image satellite en arrière-plan et en avant-plan, un petit DIV imbriqué à angles tellement arrondis qu'il apparaît comme un cercle.

En blanc le DIV principal et son CSS, en jaune le DIV imbriqué et son CSS, et en orange l'image de background et ses options. Les éléments nouveaux sont en rouge.

Ce doit être facilement transposable à un tableau (<TABLE>)


<center>

<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.1&amp;lon=-63&amp;width=550&amp;height=400&amp;gtt=55&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=3&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); background-repeat: no-repeat; background-position:center center; padding: 4px; border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; width: 550px;">
<div style="background-color: red; border-radius: 5px; border: 2px solid white; height: 5px; margin-left: auto; margin-right: auto; margin-top: 200px; text-align: center; width: 5px;">
</div>
</div>

</center>

Malheureusement, on remarque que l'image elle-même n'a plus d'angles arrondis ce qui gâche un peu mon plaisir... Une idée tout de même: supprimer le padding pour cet ensemble et le placer dans un autre DIV avec cette fois un padding de 2 à 4 pixels. À essayer...


Aucun commentaire:

Enregistrer un commentaire