CODEWITHSUNDEEP
jquerycss
dg90
dg90

Reputation: 1263

JQuery background-image won't display

I want to add a background image from JQuery.
I tried like everything but my the background-image won't show.

My code (example):

$(function() {
    var cssObj = 
    {
        'background-image' : 'url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png)'
    }

    $('.Main').css(cssObj);
});

<div class="Main"></div>

JSfiddle: http://jsfiddle.net/334N7/5/

Upvotes: 0

Views: 659

Answers (2)

dknaack
dknaack

Reputation: 60468

I have tried your code and it works. The problem is that your div is empty and has no height.

Check out my sample and this jsFiddle

<div class="Main" style="height:100px; width:100px"></div>

Update

Your jsFiddle does not work because your forgot to set jQuery as the framework

Here is your updated jsFiddle

Update

I have checked your site. The reason why it does not works is that the image arrowright.png is not there or at another path. It results in a

"GET daangeudens.be/arrowright.png 404 (Not Found)"

Change 

$(function() {
    var cssObj = 
    {
        'background-image' : 'url(../arrowright.png)',
    }

    $('.Main').css(cssObj);
});

to

$(function() {
    var cssObj = 
    {
        'background-image' : 'url(/img/arrowright.png)',
    }

    $('.Main').css(cssObj);
});

Upvotes: 2

gion_13
gion_13

Reputation: 41533

In your fiddle, you have another set of quotes surrounding the image link. remove them. : 

'url(http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png)'

instead of

 'url('http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png')'

And also, select the jquery framework in the fiddle.
Demo here

Upvotes: 2

Related Questions