get background value using css in jquery

Question

div {
    background: url('http://i.imgur.com/tOaDddv.png') no-repeat;
}

alert($('div').css('background'));

I expect it to return url('http://i.imgur.com/tOaDddv.png') no-repeat; but it returned a strange string. Although it worked too if I assign that value to another element but I just don't understand why it returned that strange string.

jQuery `css()` method returns the computed style which can be different from browser to browser — A. Wolff, Apr 02 '15 at 13:01
Inspect the element and view the computed styles: http://i.imgur.com/Z2frsPM.png — epascarello, Apr 02 '15 at 13:11

score 3 · Answer 1 · answered Apr 02 '15 at 13:08

3

'background' is a concatenation of properties (read more about this on MDN). What I asume you want is the 'background-image' and 'background-repeat' properties.

alert($('div').css('background-image') + " " + $('div').css('background-repeat'));

answered Apr 02 '15 at 13:08

Serf

51
3

1

Ya but what if as suggested by OP in other answer's comment there is an `!important` statement. In fact OP should look at `document.styleSheets` but i just don't see any reason for that – A. Wolff Apr 02 '15 at 13:11
@A.Wolff: That functionality does not exist in jQuery. Check http://stackoverflow.com/questions/10314131/check-if-css-property-has-important-attribute-applied for a none jQuery solution. – Serf Apr 02 '15 at 13:46

score 2 · Answer 2 · edited Apr 02 '15 at 13:08

2

you colud combine two attributes to get the same what you need:

alert(
   $('div').css('background-image') 
   + ' ' 
   + $('div').css('background-repeat') 
 );

edited Apr 02 '15 at 13:08

Sudharsan S

15,336
3
31
49

answered Apr 02 '15 at 13:07

Andriy B.

421
3
14

score -1 · Answer 3 · edited Apr 02 '15 at 13:07

-1

You can try

alert($('div').css('background-image'));

div {
    background: url('http://i.imgur.com/tOaDddv.png') no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div></div>

edited Apr 02 '15 at 13:07

epascarello

204,599
20
195
236

answered Apr 02 '15 at 13:00

Akshay

14,138
5
46
70

What about `no-repeat` statement? – A. Wolff Apr 02 '15 at 13:01
UM, how is this ANY different than what the OP posted? You specified just the image? You do not explain why the OP sees what they see. – epascarello Apr 02 '15 at 13:03
5

I think people downvoting it could at least leave a comment – A. Wolff Apr 02 '15 at 13:04
2

This answer isolates the background url which is evidently what the OP wants to see. This works. – KJ Price Apr 02 '15 at 13:05
2

OP expects to see `url('http://i.imgur.com/tOaDddv.png') no-repeat;` not just the BG image. Question does not answer WHY – epascarello Apr 02 '15 at 13:06
Seriously, the downvote bombs drive me crazy sometimes. – KJ Price Apr 02 '15 at 13:06
@ Akshay What the OP expect is `url('http://i.imgur.com/tOaDddv.png') no-repeat`. – Karl-André Gagnon Apr 02 '15 at 13:09

get background value using css in jquery

3 Answers3