Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 4 down vote accepted

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;
}
share|improve this answer
    
Thanks so much! I was able to create a fiddle of your solution for others to have, jsfiddle.net/4CuDx as well as modify your solution to my needs currently. The z-index and the rgba were the main issues. Thanks so much! –  Shawn Feb 25 at 18:17
    
@Dominic :before and :after are part of the CSS2 spec are universally accepted. –  Hynes Feb 26 at 15:14
    
My bad, did a quick Google as I couldn't remember but didn't look past the descriptions in the results page. In that case I can upvote, but I'd still warn @Shawn to beware that nothing will appear in IE7 and below. –  Mr E. Upvoter Feb 26 at 15:20
    
I have to also point out that it will be a nightmare for proper SEO, as you can't markup the logo with microdata/microformats because it doesn't exist until after the page loads. @Shawn consider this, if it's for a business it's a pretty bad idea to put the logo in a pseudo-element. Also, it's a bad idea to use the logo as a background-image. Reconsider your technique before you have to redesign the structure later because it isn't very semantic for search engine algorithms. –  Mr E. Upvoter Mar 1 at 15:49

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.

share|improve this answer
    
This makes the image go away completely but otherwise works. –  Shawn Feb 24 at 19:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.