Deon Williams Deon Williams - 7 months ago 40
HTML Question

Website Lightning Code CSS

I'm basically trying to achieve the result that this web page demonstrates.
http://codepen.io/Chrislion_me/pen/rVqwbO
I used some of the CSS from the above page and integrated into my page.

I'm pretty new to the whole HTML / CSS world.
What I'm trying to do for a project at uni, is create a home page where there's a picture of a lightning storm in the background, covered by a overlay which is too filter out some of the picture Picture of current website.

Basically, the photo has to remain fixed where it is, so if I scrolled further down the page it doesn't move and remains fixed up the top of the page.

So this is working perfectly fine, problem is, I can't get my lightning storm to work correctly, the storm is meant to flash a couple of times every ~ 7 seconds-ish. The first link I posted up top demonstrates what I am looking to do.

Depending on the way I play with the code, it usually just goes white and then every ~ 7 seconds it flashes the image and then goes white again.
I'm not sure where I'm going wrong, I've posted part of my code below if that helps - it's just section that hosts the image and the buttons, I can post more CSS if that's needed.

Thanks in advance! :)

HTML

<div id="bg" class="banner flashit">
<p>TEST TEXT</p>
<ul class="actions">
<li><a href="#" class="button special big">Click here</a></li>
</ul>
</div>


CSS

#bg{
padding: 16em 0 13em 0;
background-attachment: fixed;
background-image: url("images/overlay.png"), url("../images/banner.jpg");
background-position: center top;
background-size: cover;
line-height: 1.75;
text-align: center;
z-index: -2;
}
.banner {
padding: 16em 0 13em 0;
background-attachment: fixed;
background-image: url("images/overlay.png"), url("../images/banner.jpg");
background-position: center top;
background-size: cover;
line-height: 1.75;
text-align: center;
-webkit-filter: brightness(3);
filter: brightness(3);
-o-filter: brightness(3);
-moz-filter: brightness(3);
z-index: -1;
}
.flashit{
-webkit-animation: flash ease-out 10s infinite;
-moz-animation: flash ease-out 10s infinite;
animation: flash ease-out 10s infinite;
animation-delay: 2s;
}
@-webkit-keyframes flash {
from { opacity: 0; }
92% { opacity: 0; }
93% { opacity: 0.6; }
94% { opacity: 0.2; }
96% { opacity: 0.9; }
to { opacity: 0; }
}
@keyframes flash {
from { opacity: 0; }
92% { opacity: 0; }
93% { opacity: 0.6; }
94% { opacity: 0.2; }
96% { opacity: 1; }
to { opacity: 0; }
}

Answer

If I understood your problem, what you are missing here is the proper html structure. Right now you are only repeating code by applying class banner and #bg to the same element. If you notice, in the example you provided the effect is executed by applying the class animation on another div and holds the same background image and has the same size and properties, like this:

<div id="bg">

   <p>TEST TEXT</p>
    <ul class="actions">
      <li><a href="#" class="button special big">Click here</a></li>
    </ul>
</div>
<div class="bg-lighted flashit"></div>

also notice that the z-index plays an important role here by setting the #bg div under the div that has animation with z-index: -2, and the animated one with z-index:-1; so we have and image fixed on the background that never flashes and always stays. So your CSS needs to be similar to this:

#bg{

    padding: 16em 0 13em 0;
    background-attachment: fixed;
    line-height: 1.75;
    text-align: center;
  position: fixed;
 width:100%;
   background-attachment: fixed;
   background-image: url("https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919");
   background-position: center top;
   background-size: cover;
   line-height: 1.75;
   text-align: center;
   z-index: -2;
     -webkit-filter: brightness(3);
    filter: brightness(3);
    -o-filter: brightness(3);
    -moz-filter: brightness(3);

}

.flashit{
    -webkit-animation: flash ease-out 10s infinite;
    -moz-animation: flash ease-out 10s infinite;
    animation: flash ease-out 10s infinite;
    animation-delay: 2s;
}
@-webkit-keyframes flash {
    from { opacity: 0; } 
    92% { opacity: 0; }
    93% { opacity: 0.6; }
    94% { opacity: 0.2; }
    96% { opacity: 0.9; } 
    to { opacity: 0; }
}
@keyframes flash {
    from { opacity: 0; } 
    92% { opacity: 0; }
    93% { opacity: 0.6; }
    94% { opacity: 0.2; }
    96% { opacity: 1; } 
    to { opacity: 0; }
}
.bg-lighted{
   padding: 16em 0 13em 0;
    background-attachment: fixed;
    line-height: 1.75;
    text-align: center;


  background: url('https://images.unsplash.com/photo-1431352832634-845fad190fbd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ec80c41e488dc2b99ed543df2f3f0919');
  background-position: center center;
  background-origin: content-box;
  background-size: cover;
  background-attachment: fixed;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  z-index: -1;
}