semi-opaque backgrounds without semi-opaque control

My company did a Hackmatch/Hackathon last night. I ran a one-man team converting a dynamic Excel spreadsheet (meant for helping a scrum team plot out its hours and make commitments) into a one webpage app; partly for me to practice Angular, partly because I'm now scrummaster and I dislike using Excel.

I needed a trivial back end for the scripts, and found that the old simple Python webserver has a version that can also run CGI scripts -- the command is

python -m CGIHTTPServer 8081

You can then create a cgi-bin/ folder, and files under that are eligible to be executed once appropriate permissions are set. One slight oddness is that path references are relative to (I think) where the python command is run, not the location of the script. I started coding in Python (a language I barely know, but I was just doing simple things) because at some point my sleep-deprived brain thought maybe I had to, but later a Perl script slotted in neatly as well. (I had some trouble because Angular fundamentally wants to POST in JSON formats, and Python fundamentally wants to read POST info as good ol' x-www-form-urlencoded, and while both can probably be persuaded to go the other way, at that point I was too tired to sort it out, and so I recycled an old jQuery/Perl pair I had previously written.) 

Anyway, looking for a bit of visual distinction, I threw in a large photo of a Rugby Scrum as a background, but of course then the risk was making things dificult to read. I set the various sections into background divs (inline-block'd so they were sized to hold their contents, not full browser width) but then I wanted to set the opacity, so they didn't block out the cool background. But I didn't actually want the controls to be opaque! What to do?

There seem to be some hacks to try and do it via pure CSS, but they didn't work for me. I realized I could set a repeating background PNG of a semi-opaque pixel. A suitable one can be found at the Wikiedia Commons. (The link is under "no higher resolution available"... I left clicked and then hit cmd-S to save the little bugger.)  My CSS was then 

.section {

    background-image: url("Translucent_50_percent_white.png");   

    display: inline-block;

    padding: 10px;

    border-radius: 10px;

}

I'm pleased with the result! I have only meager graphics design skills, so I like tricks like using an oversized photo, easy, underutilized hacks to make a page standout.