samedi 20 septembre 2014

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

C'est la suite de mon article précédent. Le but premier était d'obtenir un liseret avec un espace autour de mes cadres à angles arrondis. En effet, dans le cas d'une image, cela ne pose pas de problèmes mais quand l'image est en background d'un DIV ou TABLE, il faut user de la propriété background-repeat: no-repeat; sinon l'arrière-plan se répète.



On se rappellera que j'avais un léger problème avec mon image d'arrière-plan dont les angles avaient perdu leur arrondi. J'avais alors suggéré d'envelopper l'ensemble de mon code dans un DIV extérieur. Du coup, je me retrouve avec 3 DIV imbriqués les uns dans les autres. Tout de suite, un problème s'est posé: un décalage des deux DIV d'origine, ce qui m'a obligé à jouer du positionnement: position: relative; top: -200px;


Le DIV principal est en blanc, le second en jaune, le troisième en vert. L'image d'arrière-plan est en noir. En rouge, les nouveautés importantes par rapport au précédent code.


Attention! Les différents paramètres de l'image sont propres à ces images satellite de Wunderground.com. N'en tenez pas compte pour une autre image.

<center>

<div style="background-color: black; padding: 4px; border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; width: 550px;">

<div style="position: relative; top: -200px; left: 0px; 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: 0px; border-radius: 6px; border: 0px solid #07D9FC; height: 400px; text-align: center; width: 550px;">

<div style="position: relative; top: 200px; 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>
</div>

</center>


Et ça donne ceci..


Note: ne fonctionne pas si l'image d'arrière-plan est coupée (pour en isoler une partie par exemple). Dans ce cas, il faudrait -s'il s'agit d'une image distante- l'afficher dans un iframe. Par exemple, je veux seulement afficher le ciel de cette webcam (sur mon blog météo):



Code: Pour que l'image ou plutôt l'iframe aie des angles arrondis aussi, il faut donc lui rajouter un style:  <iframe style="border-radius: 6px;" ...
Le DIV est en blanc et l'iframe en noir.

<center>
<center>
<div style="border-radius: 6px; border: 1px solid #07D9FC; height: 205px; padding-bottom: 5px; padding-left: 2px; padding-right: 5px; padding-top: 2px; text-align: center; width: 550px;">
<iframe style="border-radius: 6px; #B7AEAF" frameborder="0" height="230" name="nbbc" scrolling="no" src="http://icons.wunderground.com/webcamramdisk/n/e/nettlebay/4/current.jpg" width="550"></iframe>
</div>
</center>

Aucun commentaire:

Enregistrer un commentaire