how to change the <header> background color?

I'm using theme "b" for my header tag. I tried to change the color But didn't seem to work.

.ui-bar-b{
    background: #054066;
    background-image: -moz-linear-gradient(top, 
                            #054066, 
                            开发者_运维百科#00578e);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0,       #054066),
        color-stop(1,       #00578e));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00669d', EndColorStr='#00578e')";
}

here is the link

Where does the ui-bar-b class go? This seems to work.

<div data-role="header" data-theme="b" class="hn-wrapper ui-bar-b">

Jquery would be

$('.ui-bar-b').css('background-image', '-moz-linear-gradient(top, 
                            #00009d, 
                            #00578e);');

I would layer the header classes inside a relative position div

<div style="position:relative; ... specify size">
<div data-role="header" data-theme="b" class="hn-wrapper ui-bar-b-ie" style="position:absolute;">
<div data-role="header" data-theme="b" class="hn-wrapper ui-bar-b-webkit">
</div>
</div>
</div>

To avoid the head aches of different browsers and browser vs browser issues.

you don't use the class ui-bar-b in your html. so either add the class as Wayne said, or change the selector to access the element via the data-theme attribute:

ul[data-theme='b']{
...
}