Twitter bootstrap 3 carousel with fixed background image -
my feeling scrolling background image not pleasant tried fixed background banner , transparent foreground cycling images. tried following solution in case, foreground images hidden right after cycling animation: idea working?
<html> <header id="mycarousel" class="carousel slide"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="fill" style="background-image:url('banniere2000x400.jpg');"></div> <div class="item active"> <div class="carousel-caption"> <img id="menuscreen" src="carouselforeground1.png" alt="logo"/> <p>first image</p> </div> </div> <div class="item"> <div class="carousel-caption"> <img src="carouselforeground2.png" alt="logo"/> <p>second image</p> </div> </div> <div class="item"> <div class="carousel-caption"> <img src="carouselforeground2.png" alt="logo"/> <p>third image</p> </div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="icon-next"></span> </a> </header> <body> </body> </html>
edited working example: except let choose own images , needs botstrap3 installed, think should work.
i got working unfortunately, don't remember how. so, someones wonder how do, give here css rules , hope them.
header.carousel .item, header.carousel .item.active, header.carousel .carousel-inner { height: 100%; } header.carousel .fill { width: 100%; height: 100%; background-position: center; background-size: cover; } #hoverme .fill{ position: absolute; } .carousel-caption{ font-size: 4em; position: absolute; top: -11vh; left: -10vw; } .carousel-caption p{ position: relative; top: -45vh; right: -25vw; } .carousel-control { position: absolute; z-index: 10; }
Comments
Post a Comment