Apply a background image from the given URL in parameter or as per the image group (
Note: Examples below use the new CSS recently introduced in wet-boew:
Set a custom background image -
<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>
Responsive background image -
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>
- Date modified: