It is assumed that when we apply a background image to an input field that it is fixed. This is the case when short amounts of text is inputed, but once you type more than the length of the field in Internet Explorer, the background starts to move along with the text. Unfortunately, a simple background-attachment: fixed does not fix this problem.

Here is an example of what happens:

A work around which I stumbled upon is to wrap the input field in a DIV and apply the background to this, whilst making the input field’s background transparent. Your code should look like this:

#input_wrapper {
    width: 180px;
    height: 26px;
    background: url('input_bg.png') no-repeat top left;
}

input.search {
    width: 156px;
    height: 16px;
    background: transparent;
    border: 0;
    padding: 5px 12px;
    margin: 0;
}

This is tested in Internet Explorer 6+ and Firefox.

Though it may seem a simple technique to give a website a background image and centering it to the page with background: url('image_url_here') no-repeat center top, it doesn't always work out the way you want it to.

Whilst working on a client's website which required a very wide centered background and the page container to be 1024px wide, I found that once you made the browser window smaller than 1024px wide, the container made the page scroll horizontally like it should, but the background image kept shifting, centering itself to the browser window and therefore not lining up properly with the content.

Strangely, this problem was occurring in every browser except Internet Explorer 6 and 7, and after many attempts with Javascript functions and CSS expressions, a simple solution we found was to add min-width to your html and body CSS. By doing this, once the browser window reaches smaller than 1024px, the page will scroll horizontally, the background image will stop shifting and still line up with the content.

An example of how your CSS should look like is this:

html {
    min-width: 1024px;
}

body {
    min-width: 1024px;
    background: #FFFFFF url('/media/images/background.jpg') no-repeat center top;
}