The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Input with Disappearing Background Image

Last updated on:

This replicates the functionality of the standard embeddable Google Search fields. They have an image in the background and when the input is clicked into, the image disappears.

<form name="searchform" id="search-form">
       <input type="text" name="txtInput" title="Enter the terms you wish to search for." />
       <input type="submit" value="GO!" class="submit" style="cursor: pointer;" />

JavaScript underneath form markup:

<script type="text/javascript" language="javascript">
 (function() {
    var id = document.getElementById('search-form');
    if (id && id.txtInput) {
      var name = id.txtInput;
      var unclicked = function() {
          if (name.value == '') {
     = '#FFFFFF url(images/googbg.png) left no-repeat';
       var clicked = function() {
 = '#ffffff';
    name.onfocus = clicked;
    name.onblur = unclicked;

View Demo


  1. iSpy
    Permalink to comment#

    Exactly what I was looking for. Thanks.

  2. Artur Ejsmont
    Permalink to comment#

    thats actually nice

    i like it better than default text in the box :- )


  3. James
    Permalink to comment#

    I have a problem with making this work with a login form.

    If the user returns to the login page, their username and password will be automatically filled in for them. Unfortunately, the script isn’t recognizing this, so their credentials end up being displayed over the unclicked background-image.

    Any idea how to remedy this?

  4. unomyname

    James, you asked EXACTLY the question that I am struggling with.
    Did you find a solution?

  5. Glumbo
    Permalink to comment#

    I have the same problem as James

  6. Zabi
    Permalink to comment#

    When index page is opened, it should display three images and disappear in 10 to 15 seconds. Please help me.

  7. Adswaine

    Thank you!
    A simple solution to a common problem.

    Much appreciated!

    Permalink to comment#

    how i can change position image to center?

  9. Mike
    Permalink to comment#

    Thanks! It’s great :)

  10. Lashchevsky
    Permalink to comment#

    Why not?
    Only CSS.

    input {background: url('img.jpg');}
    input:focus {background: none;}
    • ChecMark

      Lashchevsky, thank you! That worked perfectly. I added a red border and color background to highlight the field. Looks great!

  11. PaulRevival
    Permalink to comment#

    Lashchevsky, +1! No js – css only..

    Either background image on input like

    input { background: #fff url("img.png"); }
    input:focus { background: none; }

    or wrap input with div {position:relative} and place a real ‘img’ inside like that:

    <div class="wrap">
      <div class="img-box">
    .wrap {
      position: relative;
      display: inline-block;
      vertical-align: top;
    .img-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 100%;
    input {
      position: relative;
      z-index: 2;
    input:focus + .img-box {
      opacity: 0;

    Enjoy some jsFiddle

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed