Help Me With css() method

Question

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).

do you keep stylesheets, images and the page you display in the same folder? — roman
– roman, Commented Jan 27, 2010 at 22:44
try using double quotes to wrap your selectors and "background" or "background-image". jQuery is probably handling some error internally because of mismatched quotes. Since you're using single quotes in your url option, you'll have to use double quotes for the jquery options. However, the url option doesn't require quotes, so you can remove those single quotes. — Jim Schubert
– Jim Schubert, Commented Jan 27, 2010 at 22:47
I think the single quotes are not required but recommended. I see them in most online css tutorials. — Richard Knop
– Richard Knop, Commented Jan 28, 2010 at 21:42

sberry · Accepted Answer · 2010-01-27 22:49:28Z

3

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.

edited Jan 27, 2010 at 22:49

answered Jan 27, 2010 at 22:44

sberry

133k20 gold badges145 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriele Petrioli · Accepted Answer · 2010-01-27 22:43:58Z

1

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

answered Jan 27, 2010 at 22:43

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

Jason · Accepted Answer · 2010-01-27 22:49:59Z

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">

<html xmlns="http://www.w3.org/1999/xhtml">

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

orip · Accepted Answer · 2010-01-27 22:51:08Z

1

Make sure the image paths are right
Remove the single quotes inside the CSS url style, i.e. url(login-bg.gif)

answered Jan 27, 2010 at 22:51

orip

76k21 gold badges120 silver badges150 bronze badges

Collectives™ on Stack Overflow

Help Me With css() method

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related