ZK - Open Source Ajax Java Framework

Hi,
I am trying to insert an image as the background of tabs, using the following css:

.z-tab .z-tab-hl  {
	background-image: url(../img/tabs/tab_sx.jpg);
}
.z-tab .z-tab-hm  {
	background-image: url(../img/tabs/tab_mid.png);
}
.z-tab .z-tab-hr {
	background-image: url(../img/tabs/tab_dx.jpg);
}



/*Tab  selezionato*/

.z-tab-seld .z-tab-text {
	background-color: white; color:black; 
}
.z-tab-seld .z-tab-hl  {
	background-image: url(../img/tabs/tab_sx_sel.jpg);
}
.z-tab-seld .z-tab-hm  {
	background-image: url(../img/tabs/tab_mid_sel.jpg);
}
.z-tab-seld .z-tab-hr {
	background-image: url(../img/tabs/tab_dx_sel.jpg);
}

But it does not work at all.
I've read the style guide, is the whole day I am trying this.

Can someone help me, or point me out to the right direction ?

Thanks.

Hi

your code is correct, I think, maybe you need to check if the image url is correct or not

the code below change background, I haved test it on ZK sandbox

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<style><![CDATA[
.z-tab .z-tab-hl  {
	background: #E6E6FA;
}
.z-tab .z-tab-hm  {
	background: #E6E6FA;
}
.z-tab .z-tab-hr {
	background: #E6E6FA;
}

]]></style>
<tabbox>
	<tabs>
		<tab label="Tab1" />
		<tab label="Tab2" />
	</tabs>
	<tabpanels>
		<tabpanel></tabpanel>
		<tabpanel></tabpanel>
	</tabpanels>
</tabbox>
</zk>

Hi,
thanks for answering.

In fact it does not work at all. Simple examples work, but if you build a page with lot of elements, it stops working.

Trust in me. I am becaming mad.

It seems like, also changing the order of "z-tab" and "z-tab-seld" changes the behaviour of the components.

I think there are some features that are not documented, like inheritance.

Can somemeone point me out to the right direction ?

but if you build a page with lot of elements, it stops working

this is strange, Could you provide the zul code ? it should be the same.

samchuang,
Cristianak77 have provided css code in his first message(see behind).
I have the same problem with tab. But I haven't such problems with button background.

.z-tab .z-tab-hl {
background-image: url(../img/tabs/tab_sx.jpg);
}
.z-tab .z-tab-hm {
background-image: url(../img/tabs/tab_mid.png);
}
.z-tab .z-tab-hr {
background-image: url(../img/tabs/tab_dx.jpg);
}

/*Tab selezionato*/

.z-tab-seld .z-tab-text {
background-color: white; color:black;
}
.z-tab-seld .z-tab-hl {
background-image: url(../img/tabs/tab_sx_sel.jpg);
}
.z-tab-seld .z-tab-hm {
background-image: url(../img/tabs/tab_mid_sel.jpg);
}
.z-tab-seld .z-tab-hr {
background-image: url(../img/tabs/tab_dx_sel.jpg);
}

Cristianak77, I trust in you. I was becoming mad last days :)
I don't understand why nobody have answered this important question for years?
So, if you have already checked by debugger image file URL is correct, check your images. They should have correct 3 level structure to work correctly.
Look for examples to the files tab-corner.png and tab-hm.png used by default in breeze breeze theme:
.z-tab-hl {
position: relative;
padding-left: 10px;
background: transparent no-repeat 0 -128px;
background-image: url(${c:encodeURL('~./breeze/zul/img/tab/tab-corner.png')});
-moz-outline: none;
outline: none;
cursor: pointer;
}
.z-tab-hr {
background: transparent no-repeat right -128px;
background-image: url(${c:encodeURL('~./breeze/zul/img/tab/tab-corner.png')});
padding-right: 10px;
display: block;
}
.z-tab-hm {
padding-left: 2px;
padding-right: 1px;
overflow: hidden;
cursor: pointer;
background: transparent repeat-x 0 -128px;
background-image: url(${c:encodeURL('~./breeze/zul/img/tab/tab-hm.png')});
}