Background image

• Documentation
• Questions or comments?

Apply a background image from the given URL in parameter or as per the image group (srcset) information.

Note: Examples below use the new CSS recently introduced in wet-boew: bg-center, bg-cover and bg-norepeat

Set a custom background image - [data-bgimg]

<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">Heading</h4>
			<p>Paragraph</p>
		</div>
	</div>

Note: Eventually, the javascript associated with this feature would be replaceable by a CSS4 selector.

Responsive background image - [data-bgimg-srcset]

This plugin is very similar to how srcset attribute works.

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

The configurations are separated by a comma and each configuration consists of a link to an image and a screen width (1000w = 1000px). That image will then be displayed at that specific width and down, unless it is the biggest image declared; if it is, then it will be shown at any width down to the next smaller configuration. Consequently, if a user's screen size is greater than any sizes listed in the attribute, it will automatically choose the one with the biggest configuration. Make sure to leave only one space between the link and the size.

<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">Heading</h4>
			<p>SParagraph</p>
		</div>
	</div>

Specify no background image for a specific breakpoint

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

<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">Heading</h4>
			<p>SParagraph</p>
		</div>
	</div>

Date modified:

2020-12-08