Adding background image to HorizontalLayout

Flow
1

Hi
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:

Java:

upperPane is HorizontalLayout

		upperPane.addStyleName("mainScreenUpperPanel");


CSS

Note: I use ‘runo’ as my base Theme


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

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

/* Make table caption bold */
.v-captiontext {
	font-weight:bold;
}

.v-panel-caption,
.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.

Thanks

Avishay

2

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.

3

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

Thanks

Avishay

4

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

5

:grin:
Thanks - it worked!

6

I was referring to chaging from:

.v-horizontallayout .v-horizontallayout-mainScreenUpperPanel

to

.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.