Fade in background image on start passage

cometlettuce

I'm using Sugarcube for Twine 2.0. I'm hoping someone can help me with the following:

I have a background image that is the same on each passage throughout the game, but I'd like it to fade in on the start passage (and only this passage). Is there a way to
a) have a background image fade in
b) have the fade in effect occur on only one passage?

Thanks!

Jud_Casper

Try this.

Add a tag to start passage - call it anything... for this example we'll use imagefade

In the same passage (main body) add this (replacing http://******.jpg with you own image url)::

<img src="http://******.jpg">;

Then open your CSS (Up arrow at the bottom left of the screen, next to the house icon and game title) and choose 'Edit Story Stylesheet.

Then add this:

.imagefade {
        
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */
    animation: myfirst 5s ;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

  /* Standard syntax */
  @keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

The two instances of myfirst 5s are used to control the fade in speed. Increase the value here if you want a slower fade in.