How to change CSS (background-image) from JQuery in Rails?

Question

I am trying to change the background image in the body tag in my Rails app. I have tried it from items.js.coffee (I have table called items) and from application.js. I cant make it work from either.

I have tried to change the background color, and thats working from application.js but not from items.js.coffee.

So my question is: How can I change the background image and must all changes in CSS be done from application.js?

items.js.coffee:

$ ->
    $(document).ready ->
        if something
            $("body").css "background-image", "url(rails.png)"

bootstrap_and_overrides.css.less:

body { 
    padding-top: 60px;
    background-color: black;
    background-image:url('HypeTrans.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: 50% 50%;
}

So to be sure I'm clear: you can change the background color on the <body> tag when loading the "items" page when your code is in either application.js or items.js.coffee, but you cannot change the background image when the code (otherwise the same) is in items.js.coffee? It is definitely not the case that CSS operations need to be done from application.js, only that the JS doing the change is executed during (or more commonly) after page load. — Tom Harrison
– Tom Harrison, Commented Nov 29, 2012 at 13:53
I found the problem to this and solved it (described in the comment under). The problem I have now is described in the comment to the answer under. Please take a look and see if you know what the problem could be. Regards — allegutta
– allegutta, Commented Nov 29, 2012 at 14:35
$ -> and $(document).ready -> are the same thing, you don't need both. — loganfsmyth
– loganfsmyth, Commented Nov 29, 2012 at 17:56

lukerandall · Accepted Answer · 2012-11-29 14:21:30Z

3

It seems that the most likely explanation is that you are not including the items.js file in your layout or application.js if you're using the asset pipeline.

In development mode, view the source of the rendered page* and confirm that items.js is being included on the page. If it is not, and assuming you are using Rails 3.1+ - I'd suggest you review the Asset Pipeline Rails Guide to see how to add files to your manifest.

I suggest this as it should work whether or not you are using the asset pipeline, as in development mode files in your application.js manifest are included individually.

Update

Related to this, is the fact that if you are referring to assets served from the asset pipeline, they will appear under /assets, so your code should be

$("body").css "background-image", "url('/assets/rails.png')"

edited Nov 29, 2012 at 14:21

answered Nov 29, 2012 at 13:43

lukerandall

2,21217 silver badges29 bronze badges

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

3 Comments

allegutta Over a year ago

For some reason the //= require_tree . wasnt in the application.js, I added it and now I can change the background color (thanks for pointing that out), but I still cant change background-image. This works: $("body").css "background-color", "red" but this does not work: $("body").css "background-image", "url(Hype.png)". What is wrong here (I have an image called Hype.png)?

lukerandall Over a year ago

See my update above: is hype in your app/assets/images directory?

allegutta Over a year ago

YES! Thanks Luke - thats it! :)

The Mechanic · Accepted Answer · 2012-11-29 13:53:31Z

0

i m showing you one of the way to write css code in javascript so you can try this

$(function(){
    if(something){
        $("body").css({
            'background-image':'url(path of the image)'
        })
    }
})

in this way you can write css

answered Nov 29, 2012 at 13:53

The Mechanic

2,3391 gold badge28 silver badges37 bronze badges

Comments

Richlewis · Accepted Answer · 2012-11-29 14:02:14Z

0

Why dont you just change background-image to background in the

bootstrap_and_overrides.css.less

so make it look like this

body { 
padding-top: 60px;
background-color: black;
background:url('HypeTrans.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

}

answered Nov 29, 2012 at 14:02

Richlewis

15.4k39 gold badges138 silver badges300 bronze badges

1 Comment

allegutta Over a year ago

Hi, its because the image only covers a smal part of the screen and I want the background color to be black. (If I use the background tag only, the background color gets white.)

Collectives™ on Stack Overflow

How to change CSS (background-image) from JQuery in Rails?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related