tags:

views:

34

answers:

4

So, I am trying to change background of two input fields after the document loads. I use this jquery code:

$(document).ready(function() {

    $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
    $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");

});

I have looked at the code in the Firebug and it seems alright. However, the input fields don't change their background.

If I just set their background in the stylesheet it works (I want to do it with jquery though because I want to change the background of the fields after various events take place).

+1  A: 

The images should be in the same path as your page.

Gaby
+3  A: 

I think you need to use

css("background-image", "url(login-bg.gif)");
css("background-position", "3em center");
css("background-repeat", "no-repeat");

OR rather

css( { "background-image"    : "url(login-bg.gif)",
       "background-position" : "3em center", 
       "background-repeat"   : "no-repeat"
     }
);

First sentence on the docs page

"Shorthand CSS properties (e.g. margin, background, border) are not supported."

ALSO the path to the image should not be quoted.

sberry2A
+1  A: 

I tested the below code in both FF 3.5.7 and IE 7 and it seems to work. Sure you check already...but typo somewhere?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
        <title>Test</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" /></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('#login').css('background', "url('login-bg.gif') 3em center no-repeat");
                $('#password').css('background', "url('password-bg.gif') 3em center no-repeat");
            });
        </script>
    </head>

    <body style="font-family: Verdana; font-size: 0.8em; margin: 3em; background-color: #f1f1f1;">

    <div><input id="login" type="text" /></div>

    <br />

    <div><input id="password" type="text" /></div>

    </body>

</html>
Jason
Yep, I had a typo :)
Richard Knop
+1  A: 
  1. Make sure the image paths are right
  2. Remove the single quotes inside the CSS url style, i.e. url(login-bg.gif)
orip