Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 ⇒ & Plusieurs background-image.



CSS 3 : Images multiples dans un même div

Le CSS3 permettent des background multiples.
On peut mettre plusieurs à différents endroits d'une page La propriété background-image Avant  CSS 2.1, qu'une seule image.

CSS 3 : Images multiples dans un mêmediv

 

Dans ce tuto, on vas voir comment placer une image aux quatre coins d'une page.

Les CSS3 apportent une vraie simplification et une souplesse à toute épreuve avec les background multiples.

La syntaxe :

    background:url(images/icon1.gif) no-repeat left top,
    

On utilise background chaque nouveau fond devant être simplement séparé par une virgule.

Mode emplois

on utilise les images dans chaque coin d la page

Top left Top right Botton left Botton right

Une image aux quatre coins d'une page

Code CSS
.plusieurs-background-image {
   background: url(images/top-gauche.png) no-repeat left top, 
url(images/top-droite.png) no-repeat right top, 
url(images/bas-gauche.png) no-repeat left bottom, 
url(images/bas-droite.png) no-repeat right bottom; 
}
    

Code (x)html:
<div class="plusieurs-background-image">
Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.
Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine,  
 vergentem in mare, valido muro firmatum, ubi conduntur nunc usque  
 commeatus distribui militibus omne latus Isauriae defendentibus adsueti. 
  circumstetere igitur hoc munimentum per triduum et trinoctium et cum  
 neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis  
 quicquam geri posset, nec procederet ullum obsidionale commentum, maesti   
excedunt postrema vi subigente maiora viribus adgressuri.
</div>

Résulat

Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum. Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis. Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.

Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces