Adding background image to HorizontalLayout

I try to add background image to HorizontalLayout with no success.
I followed
Background image inside Panel
and add some posts there.
However my layout is HorizontalLayout.
Here is what I did:


upperPane is HorizontalLayout



Note: I use ‘runo’ as my base Theme

@import url(../runo/styles.css);

/* No text transform */
.white .v-table-header-wrap,
.white .v-table-footer-wrap,
.v-table-header-drag {
	text-transform: none;

/* Make table caption bold */
.v-captiontext {

.v-panel-caption-light {
    font-size: 12px;

.v-horizontallayout .v-horizontallayout-mainScreenUpperPanel {
	background: url(_icons/header_BG.jpg);
	background-repeat: no-repeat;
	background-position: left bottom; 

I believe my mistake is somehow related to the CSS… but I can not find it.



Not really sure if this is the problem but,

.v-horizontallayout .v-horizontallayout-mainScreenUpperPanel {

I think the space should be removed between those two names. Now that means that you have a horizontalLayout and inside of that horizontallayout is a horizontallayout-mainScreenUpperPanel. If you remove the space it means that you are theming a layout which is both a horizontallayout as well as a -mainScreenUpperPanel.

This is of course no issue if mainScreenUpperPanel has somewhere a parent that is another horizontallayout.

I am not sure I get the point…
Which space you are talking about?
How should it look according to your suggestion?



hi, try changing .v-horizontallayout .v-horizontallayout-mainScreenUpperPanel to .v-horizontallayout-mainScreenUpperPanel

Thanks - it worked!

I was referring to chaging from:

.v-horizontallayout .v-horizontallayout-mainScreenUpperPanel



the first one means that the two has to be inside each others, while the second means that one element needs to have both. The one suggested by danny means that it only needs to have the second part of it. Both of the solutions work.