html css sticky, etc

Question

For the code below, I have two problems:

1. The background image cereal.jpeg was working, now for some reason, it's disappeared and I can't figure why. Because it used to work, I know the file name and location are correct.

2. My controls refuse to remain sticky!

div.container {
  border-style: solid;
  border-width: thin;
  border-color: grey;
  box-shadow: 10px 15px 8px black;
  height: 1500px;
  width: 700px;
}

div.container::before {
  background-image: url("cereal.jpeg");
  background-repeat: repeat;
  opacity: 0.05;
}

div.controls {
  float: left;
  width: 140px;
  border: 1px solid lightgrey;
  position: -webkit-sticky; // Safari
  position: sticky;
  top: 0;
}

div.thePlots {
  float: left;
  border: 1px solid lightgrey;
  width: 400px;
  height: 1400px;
}

<div id=container class=container>
  <div class=controls id=controls>
    <label id="brand">Brand:</label>
    <br>
    <select size=7 id="brandOptions" multiple>
      <option value=0 selected>All</option>
      <option value=1>Kellog</option>
      <option value=2>Post</option>
      <option value=3>Quaker</option>
      <option value=4>General Mills</option>
      <option value=5>Tree House</option>
      <option value=6>CPW</option>
    </select>

    <br><br><br>

    <label id="barsLabel">Error Bars:</label>
    <input id=barsPresent type=checkbox value="Error Bars" checked>

    <br><br><br>

    <label id="label">Elasticity<br>Means:</label>
    <br>
    <select id="plotY">
      <option value="efm" selected="selected">efm</option>
      <option value="enm">enm</option>
    </select>
    <br><br><br>
  </div>

  <div class=thePlots id=thePlots>
    The Plots<br>
    <div class="tooltip" id="tooltip"></div>
    <div id="plotshare" class="plotshare"></div>
    <div id="plotprice" class="plotprice"></div>
    <div id="plotsugar" class="plotsugar"></div>
    <div id="plotmushy" class="plotmushy"></div>
  </div>
</div>

Answer 1

Your div.controls element is sticking just fine, but it's sticking to the top of your container element. If you put it outside out your container element you will see it stick to the top of the page as desired.

Also, you will need to remove the // safari from your css. The correct syntax for commenting in css is /* comment */

For the background issue, there is no content for your background to display behind. You will need to add something to the before in order for the background to show.

Check this working fiddle which solves both problems : https://jsfiddle.net/c5vrhf7t/1/

Answer 2

1. opacity is too low.
2. Remove float:left;