0

Sorry this noobish question has been asked a lot, but none of the solutions i've read and tested works for me...

I'm trying to create that kind of parallax effect with a carousel background : https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm It's for my father's website, I'd like to make him this present for this week end (HB dad !)

Here's my code :

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  height: 100%;
}

.carousel-item {
  height: 75vh;
  min-height: 500px;
  background: no-repeat center center scroll;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 }
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Half Slider - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/half-slider.css" rel="stylesheet">

  </head>

  <body>

    

    <header>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <!-- Slide One - Set the background image for this slide in the line below -->
          <div class="carousel-item active" style="background-image: url('img/slide1.jpg')">
        
          </div>
          <!-- Slide Two - Set the background image for this slide in the line below -->
          <div class="carousel-item" style="background-image: url('img/slide22.jpg')">
          </div>
          <!-- Slide Three - Set the background image for this slide in the line below -->
          <div class="carousel-item" style="background-image: url('img/slide3.jpg')">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </header
    
     <!-- Page Content -->
    <div class="jumbotron">
      <h1 class="text-center">SARL COQUILLE</h1>
    </div>

    <!-- rest of my html -->
    
   </body>
  </html>

I started my project with this template (if it can helps), and simply want the page content to overlap the header : https://blackrockdigital.github.io/startbootstrap-half-slider/

Issue : images are resized to the viewport size after ~0.5scd

Tested solutions : use position instead of background-position, resize my image (1900*1080), background-size: auto 100%, some others i've forget (sorry !)

A weird behavior : (weird to me since I'm a noob) the 1st picture loads at the perfect scale

Can anyone give me a piece of advice ? I've read/watch differents tutorials but nothing works to me, I've also read W3School documentation but it didnt really helps me...

Sorry for my poor english !

Sumak
  • 319
  • 1
  • 3
  • 8
  • Can you create a codepen/jsfiddle link to play with the code? I'm guessing the carrousel plugin is doing something to your styles, maybe you can add `!important` to your properties so they don't get overriden by the plugin. – arieljuod Dec 13 '18 at 16:47
  • Hey, thanks for answering ariejuod ! Not a codepen link, but if you'd like to : https://wetransfer.com/downloads/51cf0dc3bd3afe2eb0ca97f018b4a07920181213173412/570ebb7ec15e95a79bc691f3c79f65e520181213173412/555c08 (there's multiples folders in my project, I think it's more convenient this way) I've tried !important on background-size and background-position, sadly it's not fixing it. My main problem is that I'm using people's code that I dont totaly understand (carousel/bootstrap for exemple). Still tweaking the settings, I keep you update if I found something that works ! – Sumak Dec 13 '18 at 17:39
  • I kinda give up during a hour... Hopefully integrating wow.js and animate.css was easy and reboosted my motivation (that banner bug is one of the only bug left I've to fix, rest will be design details) – Sumak Dec 13 '18 at 19:35

0 Answers0