: CSS: Fade input image on focus is too dark 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

@Jennifer810

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;
}

Vote Up Vote Down

@Kristi927

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.

Vote Up Vote Down