<div class="flexslider">
<ul class="slides">
<li id="slide1" class="post-43 slide type-slide status-publish hentry" style="background-image: url(http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_grass.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;">
<div class="details">
<div class="box">
<div class="inside">
<div class="text">
<p><img src="http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic.png" alt="slide_1_graphic" width="351" height="331" class="alignnone size-full wp-image-44" srcset="http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic.png 351w, http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_1_graphic-300x283.png 300w" sizes="(max-width: 351px) 100vw, 351px" /></p>
<a href="http://themetrust.com/baylie" target="_parent" style="background-color:#a06546;" class="button ">Buy This Theme</a>
</div>
</div>
</div>
</div>
</li>
<li id="slide2" class="post-128 slide type-slide status-publish hentry" style="background-image: url(http://demos.themetrust.com/baylie/wp-content/uploads/sites/16/2013/09/slide_mountains.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;">
<div class="details">
<div class="box">
<div class="inside">
<div class="text">
<h1>A Full Screen Slideshow</h1>
<p>Make a bold statement with big images.</p>
<a href="http://themetrust.com/demos/baylie/portfolio/" target="_parent" style="background-color:#cc6f41;" class="button ">View Portfolio</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>$('.flexslider').flexslider({
slideshowSpeed: 6000,
directionNav: true,
slideshow: 1, // включаем автоматическую прокрутку
animation: 'fade', // эффект перелистывания - fade
animationLoop: true
});
#back {
background: url(http://www.theactionpixel.com/wp-content/uploads/2015/06/spidermanMilemorales.jpg) no-repeat 100% 0;
background-size: cover;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateZ(-1px) scale(2);
}
#back {
background-size: cover;
background: url(mainSpidey.jpg) no-repeat 100% 0;
}background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-color#back {
background: url(mainSpidey.jpg) no-repeat 100% 0 / cover;
}#back {
background: url(mainSpidey.jpg) no-repeat 100% 0;
background-size: cover;
}function scrollTo(id) {
var to = $('#'+id).offset().top;
$("html, body").animate({scrollTop: to}, 500);
}
