JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<h2>Working with the css background properties</h2>

<article>
  <h3>Multiple backgrounds</h3>
  <div class="box box-one"></div>
  <div class="box box-two"></div>
  <a href="http://www.css3.info/preview/multiple-backgrounds/">info</a>
</article>

<article>
  <h3>Using hsl</h3>
  <div class="box box-hsl"></div>
  <a href="https://www.w3schools.com/css/css3_gradients.asp">info</a>
</article>

<article>
  <br>
  <br>
  <p>
scroll scrolls with the main page, but remains fixed inside it's containing element, while local scrolls with the main page and it's containing element. If you review the video again hopefully you can see what I mean.</p>

<div class="box box-full">
 <div class="inner">
   
 </div> 
</div>

</article>

CSS

.box {
  display: inline-block;  
  height: 300px; 
  width: 300px;
  margin: 5px;
  border: 1px solid red;
  background-repeat: no-repeat, repeat-y;
  background-position: bottom left, top left;
  background-size: contain, cover;
}

.box-full{
  overflow: auto;
}
.box-full .inner{ 
  height: 600px;
    background-image: 
  url(https://images.freecreatives.com/wp-content/uploads/2016/03/Sky-Anime-Background.jpg);
}

.box-one {
  background-image:
  /* multiple background images */
  url(https://i.pinimg.com/736x/3c/7a/fc/3c7afc1b68c0f8cc367dd9d0f1f383de--anime-mermaid-anime-scenery.jpg), 
  url(https://images.freecreatives.com/wp-content/uploads/2016/03/Sky-Anime-Background.jpg);
}

.box-two {
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/24/fc/76/24fc76648932f0b8545f872045c0a181.jpg)
}

.box-hsl {
  background-image: linear-gradient(to right , hsla(80,50%,50%,0.5), hsla(20,50%,50%,0.2))
}