Gouvernement du Canada / Government of Canada

Recherche

Image d'arrière plan

Défini une image d'arrière plan pour l'URL passé en paramètre ou tel que spécifier par l'information du group d'image (srcset).

Noter: Les exemples ci-dessous utilise de nouveau CSS introduit récemment dans la wet-boew. Tel que: bg-center, bg-cover et bg-norepeat

Definir une image d'arrière plan - [data-bgimg]

Titre

Paragraphe

Code source 
<div class="bg-cover bg-center well" data-bgimg="../../demos/tabs/img/investinourfuture.jpg">
		<div class="well mrgn-tp-md mrgn-bttm-md">
			<h4 class="mrgn-tp-md">Titre</h4>
			<p>Paragraphe</p>
		</div>
	</div>

Noter: Éventuellement le code javascript associé à cette fonctionalité pourra être remplacé par un sélecteur CSS 4.

Définir une image d'arrière plan adaptable - [data-bgimg-srcset]

Cet fonctionalité est très similaire à l'attribut de l'image srcset.

data-bgimg-srcset="image1_link 600w, image2_link 960w, image3_link 1280w"

Chaque configuration sont séparé par une virgule et consiste en un lien suivi de la largeur d'écran en pixel (1000w = 1000px). L'image sera affiché selon que la largeur définiera la valeur maximal permis pour utiliser l'image. Par conséquence, si la grandeur de l'écran de l'utilisateur va au delà des grandeurs spécifié, l'image qui a la plus grande largeur sera sélectionné. Make sure to leave only one space between the link and the size.

Titre

Paragraphe

Code source 
<div class="bg-cover well"
		data-bgimg-srcset="../../demos/tabs/img/investinourfuture.jpg 600w,
				../../demos/tabs/img/flytheskies.jpg 960w,
				../../demos/tabs/img/protect-environment.jpg 1280w">
		<div class="well mrgn-tp-md mrgn-bttm-md">
			<h4 class="mrgn-tp-md">Titre</h4>
			<p>Paragraphe</p>
		</div>
	</div>

Définir aucune image d'arrière plan pour un certain point d'arrêt - [data-bgimg-srcset]

data-bgimg-srcset="https://wet-boew.github.io/vocab/wb/utilities#no-image 600w, image2_link 960w, image3_link 1280w"

Titre

Paragraphe

Code source 
<div class="bg-cover well"
		data-bgimg-srcset="https://wet-boew.github.io/vocab/wb/utilities#no-image 600w,
				../../demos/tabs/img/flytheskies.jpg 960w,
				../../demos/tabs/img/protect-environment.jpg 1280w">
		<div class="well mrgn-tp-md mrgn-bttm-md">
			<h4 class="mrgn-tp-md">Titre</h4>
			<p>Paragraphe</p>
		</div>
	</div>

Détails de la page

Date de modification :