Set page background color based on background of a class?

Question

I want to extract the background from this CSS and then use it to set the page's background-color:

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

The jQuery I have so far:

$(function() {
    var color = $(".ui-widget-header").css("background");
    //var color = "black"; // works fine when uncommented
    $(document.body).css("background-color", color);
});

I know I'm not far off since the commented out line works and sets the page's background to be black. I think the problem is that background in .ui-widget-header isn't a simple color and includes an image.

If that's indeed the problem, how can I extract just the color (#5c9ccc)? Plain old Javascript would be fine too, if that's simpler.

More background (no pun intended): I'm using jQuery-UI Themeroller and want to set the page background based on the theme a user chooses.

Answer 1

Try grabbing background-color instead:

var color = $(".ui-widget-header").css("background-color");