CODEWITHSUNDEEP
javascriptjquery
Subhajit Panja
Subhajit Panja

Reputation: 1240

jquery background image url failed

This is not working ....

$("#news_all ul li").css("background", "transparent url('../images/01.png') no-repeat");

but this is working 

.news_all_item li {
    background: url("../images/01.png") no-repeat scroll 0 0 transparent;
    margin-bottom: 2%;
}

My html

<div class="news_all_item" id="news_all">
  <ul>
   <li><div class="news_item">Lorem Ipsum is simply dummy text of the printing and typesettiLorem Ipsum is simply dummy text</div></li>
   <li><div class="news_item">Lorem Ipsum is simply dummy text of the printing and typesettiLorem Ipsum </div></li>
   <li><div class="news_item">Lorem Ipsum is simply dummy text of the printing and typesetti</div></li>
  </ul>
</div>

Upvotes: 2

Views: 1019

Answers (6)

Sujit Patil
Sujit Patil

Reputation: 183

try this

$( "ul#news_all> li" ).css("background", "transparent url('../images/01.png') no-repeat");

Upvotes: 0

Nirbhay Mishra
Nirbhay Mishra

Reputation: 1648

It should be background-image, not background, as the attribute key.

Upvotes: 0

AVAVT
AVAVT

Reputation: 7143

I think it is because of the relative link.

I suspect your style sheet probably is in the css folder; and the javascript is probably written in your html, which is in the root folder.

In the style sheet "../images/" is valid because from folder css, '../' goes back one level (to the root folder) then '/images' access the images folder. But from the root folder you'll have to omit the ../ (doesn't need to go back a level anymore).

Anyway if you're using relative link, keep in mind the starting point of the path is where the code is written.

Upvotes: 1

Sasidharan
Sasidharan

Reputation: 3750

Use background-image instead of background..

$("#news_all ul li").css("background-image", "transparent url('../images/01.png') no-repeat");

Upvotes: 0

Akshay
Akshay

Reputation: 3866

Perhaps path may a problem.(Give absolute path if you can. i.e. assets/style/images/01.png)

in css file ../images/01.png may exist but from js file ../images/01.png may not exist

You may have a folder structure like.

asset
     |-->style
          |-->css
               |-->mycss.css
          |-->images
               |-->01.png
     |-->js
          |-->myjs.js

so here from css ../images/01.png is valid but from js file the same thing is not valid

Upvotes: 1

Surama Hotta
Surama Hotta

Reputation: 130

As you are trying to set the background you can apply via class selector ".news_all_item" instead of "#news_all_item"

 $(".news_all_item li").css("background", "transparent url('../Encounters/LandingPage.PNG') no-repeat");

Upvotes: 0

Related Questions