Setting a Background Image

To set a background image to the slide, you need to define the image as a direct child element inside the slide element. Master Slider searches for the first non layer?img?element inside the slide. If you wish to exclude an?img element from selecting the background image, you can add?ms-not-bg?class to the image element.

Master Slider supports?srcset?and?sizes?attributes over the?img?element, therefore, you can define different image sources based on screen size as a slide background.

Enable preloading the background image

In order to let the slider control the procedure of loading slider images including the background image, you need to define the source attribute as data attribute. You can check out the following example:

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<!-- classic img with src attribute and data-src -->
			<img src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" alt="">
		</div>
		<div class="ms-slide">
			<!-- img with src attribute and data-src data-srcset -->
			<img src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" data-srcset="..path/to/custom-image1.jpg 200w, ..path/to/custom-image2.jpg 900w" alt="">
		</div>
		<!-- .... -->
	</div>

Note: Since adding?src?attribute is mandatory, it is highly recommended to set a path to a blank image like the example. You can find a blank.gif example in the download package.

Background image fit mode

You can set how the background image fits the slide area by?data-fit?and?data-object-position?attributes.

data-fit attribute

It specifies how should the background image be resized to fit the slide. Possible values are:

fill?- The background image will completely fill the slide. If its aspect ratio does not match the aspect ratio of the slide, then it will be stretched to fit.
contain?- The background image scales to maintain its aspect ratio, while fitting the slide.
cover?- The background image scales to maintain its aspect ratio, while filling the slide.
none?- The background image will not be resized.
scale-down?- The background image scales as if?none?or?contain?were specified, whichever would result in a smaller concrete image size size.
tile?- The background image repeats in X and Y to tile the slide.

data-object-position attribute

It determines the alignment of the background image inside the slide. It supports CSS?css-position?values. For more information check out?css object position.

The example below shows how to use above data attributes:

	<div id="masterslider" class="master-slider">
		<div class="ms-slide">
			<img src="...path/to/blank.gif" data-src="..path/to/original-image.jpg" alt="" data-fit="cover" data-object-position="100% 10%">
		</div>
	</div>

Note: If you need to set background image fit value globally, you can use?slideFit?slider option.