jqGrid: change background Image in the header of grid - jqgrid

Question

I have a jqGrid and it comes with default background image, I want to change the background image of it. I tried couple of ways as suggested in online
METHOD 1. I added below code in my CSS
.ui-jqgrid .ui-widget-header
{
background-image:url(images/my-header.png) repeat-x !important;
}
METHOD 2.Added below code to load complete event of jqGrid
loadComplete: function () {
$("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}
in CSS I added
.jqgrid-header{
background:red url(images/my-header.png) repeat-x scroll 50% 50%;
border:1px solid black;
color:Blue;
font-weight:bold;
}
and I am loading css files after jqGrid css file but could not achieve it
How can I do it ?? Any sample code please... I am new to jqGrid and jQuery..

Answer 1

First of all you can use ThemeRoller of jQuery UI to customize theme which you use on the page. You can reduce the applying of the theme only to a paer of your page by usage of "CSS Scope" (see the answer).
Alternatively you can specify background of .ui-jqgrid .ui-widget-header. The demo uses the background from "Dot Luv" theme. Additional to background I specified colors of the text and the border to make the look of header better. I used CSS
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
color: #f6f6f6;
}
The resulting grid looks like on the picture below