Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Mike,</p> <p>Here's some code. You can leave the box where it is, just have to follow the <a href="http://www.w3schools.com/css3/default.asp" rel="nofollow">CSS rules</a> and it's all good.</p> <p>The CSS3:</p> <pre><code>#backgroundContainer { width:100%; height:500px; position:relative; background: #CCCCCC url("https://appharbor.com/assets/images/stackoverflow-logo.png") no-repeat; animation: myOption 5s infinite linear; -webkit-animation: myOption 5s infinite linear; } @-keyframes mymove { 0% {background:left:0px; top:0px;} 25% {background:left:0px; top:-250px;} 50% {background:left:0px; top:500px;} 75% {background:left:0px; top:-250px;} 100% {background:left:0px; top:0px;} } /* Safari and Chrome */ @-webkit-keyframes mymove { 0% {background:left:0px; top:0px;} 25% {background:left:0px; top:-250px;} 50% {background:left:0px; top:500px;} 75% {background:left:0px; top:-250px;} 100% {background:left:0px; top:0px;} } </code></pre> <p>And here's the html.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;!-- &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="css/bgContainer.css" /&gt; &lt;/head&gt; --&gt; &lt;div id="backgroundContainer"&gt; &lt;select &gt; &lt;option id="select" value=""&gt;-- Select a Test Case --&lt;/option&gt; &lt;option id="ov1" value="1"&gt;Test1&lt;/option&gt; &lt;option id="ov2" value="2"&gt;Test2&lt;/option&gt; &lt;option id="ov3" value="3"&gt;Test3&lt;/option&gt; &lt;option id="ov4" value="4"&gt;Test4&lt;/option&gt; &lt;option id="ov5" value="5"&gt;Test5&lt;/option&gt; &lt;option class="ov6" value="6"&gt;Test6&lt;/option&gt; &lt;option id="ov7" value="7"&gt;Test7&lt;/option&gt; &lt;option id="ov8" value="8"&gt;Test8&lt;/option&gt; &lt;option id="ov9" value="9"&gt;Test9&lt;/option&gt; &lt;option id="ov10" value="10"&gt;Test10&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/html&gt; You'll have to reset your timer, and your CSS import link, I didn't want to wait 240s every time I ran it. </code></pre> <p>That code is live here: <a href="http://codepen.io/JasonDavis34/pen/sobte" rel="nofollow">CodePen</a></p> <p><a href="http://docs.webplatform.org/wiki/css" rel="nofollow">WebPlatform.org</a></p> <p><a href="http://www.w3.org/standards/techs/css#w3c_all" rel="nofollow">W3C.org</a></p> <p>Jason,</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload