slider image diaappears

Hello,

I wish to use the canvas slider but I have encountered a strange phenomenon, which I cannot explain. Maybe you can.

I have used the slider code that is given in the documentation:

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide" style="background-image:url(images/slider/swiper/Villa.jpg)">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>

The background image (images/slider/swiper/Villa.jpg) is perfectly visible and as expected in full screen. But I do not want it full screen, but with a specified height. So I followed again your documentation and removed the class .full-screen and added an extra style attribute as you can see below. The funny thing is that when you view this version of the code in the browser, there is a completely black field where the image should be, although with the proper height!
Can you explain this behaviour?

<section id="slider" class="slider-parallax swiper_wrapper clearfix" style="height:400px">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide" style="background-image:url(images/slider/swiper/Villa.jpg)">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>