CSS: Fade input image on focus is too dark

Question

How can I simply make the background fade a bit while typing WITHOUT affecting the text opacity?. Without fading if you type over the top of the image it is hard to read. The reason I have not faded the image is I want it to looks strong, and then fade when typing.

Css:

.search-block #s {
    background: #FFF url(../folder/images/logo.png) no-repeat top center;
    background-size: contain;
    width: 300px;
    color: #000;
    opacity: 1;
    background-position: right 50px top;
}
.search-block #s:focus {
    color:#000;
    //opacity: 0.5; //if this is set the field fades like i want but is dark and not white like i want
}
.search-block .search-button {
    background: #2F2F2F;
    opacity: 1;
    border-right: none;
}

HTML:

<div class="search-block">
    <form method="get" id="searchform" action="...">
        <button class="search-button" type="submit" value="..."></button>   
        <input type="text" id="s" name="s" value="..."  />
    </form>
</div>

Edit a varient of @Hynes solution:

I didn't add in the transitions here just to show base css that got it working perfectly:

.search-block {
    display: block;
    position: relative;
}
.search-block:after {
  background: #FFF url(../folder/images/logo.png) no-repeat top center;
  background-size: contain;
  background-position: right 50px top;
  color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  content: "";
}
.search-block #s {
    background-color: rgba(255,255,255,0);
    width: 300px;
    color: #000;
    opacity: 1;
}
.search-block:hover #s {
    background-color: rgba(255,255,255,0.5);
    color: #000;
}
.search-block #s:focus {
    background-color: rgba(255,255,255,0.8);
    color: #000;
}
.search-block .search-button {
    background: #2F2F2F;
    opacity: 1;
    border-right: none;
}
.search-block:hover .search-button{
    color: #FFF;
    opacity: 1;
}

Here is the fiddle to the original solution: Fiddle

Answer 1

You can't adjust the opacity of a background-image in CSS. You'll have to fake it by inserting the background-image into a pseudo element (like :after) on your .search-block. Then you can edit the opacity of the background-image independently of your div. For a how-to on this, check out CSS-Tricks.

---

Update

You have a couple issues in your updated CSS. One is that setting an object with a z-index of "-1" actually moves it behind the browser viewport. Think of the browser viewport as the very last layer for z-index:0. The way HTML renders determines the z-index. Items later in the HTML are considered "higher" in the z-index unless otherwise specified. So setting an object to a z-index of -1 moves it behind everything.

Also you're using opacity way too much. You have to alter the background-color on the input, not the container div with the background. Here's how I would alter your CSS:

HTML

<div class="search-block">
<form>
  <button class="search-button" type="submit" value="...">
    Click Me!
  </button> 
  <div class="input-container">
    <input type="text" id="s" class="input-field" name="s" value="..."  />
  </div>
</form>

CSS

.input-container, .search-button {
  display: inline-block;
}
.input-container {
  border: 1px solid #999;
  position: relative;
}
.input-container:after {
  background: url("http://wwwcache.wral.com/asset/wral-tv/2014/02/13/13392752/59410-snowmg1-316x422.jpg") no-repeat center center;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.input-field {  
  background-color: rgba(255,255,255,0.5);
  border: 0 solid transparent;
  color: #000;
  position: relative;
  padding: 0.5em;
  width: 20em;
  z-index: 10;
}
.input-field:hover {
  background-color: rgba(255,255,255,0.75);
  transition: background-color 0.1s ease-in;
}
.input-field:focus {
  background-color: rgba(255,255,255,0.9);
  transition: background-color 0.1s ease-in;
}
.search-button {
  background: #2F2F2F;
  border-right: none;
  color: #FFF;
}

Answer 2

I dont know what .search-block #s is refering to or what it looks like. But try adding

background: #FFF;

To

.search-block #s:focus {

It might work.