Adding image to CMS layout?

[Eltu]

I run a forum using vB 4 with CMS, and would like to add an informational banner at the top of the main page, in the form of a png image. As in, a part of the CMS layout and below the normal banner.

I've managed to make the CMS layout work for this (see the dark yellow space above, where I can add a widget):

https://vborg.vbsupport.ru/external/2011/09/53.jpg

But so far, I haven't found a way to actually add a static image to a layout slot instead of a widget. Is this possible?

Eltu

[setishock]

The layout is just for the widgets. Where they get parked on the page.
Pop this in your additional.css and adjust as needed.

/* Seti added: Background color and image */
.vbcms_content {
margin:0.5em 0 1em;
width: 100%;
float: {vb:stylevar left};
background: #000033;
background-image: url(path/to/your/image);
background-repeat:no-repeat;
background-position:center top;
}

This may not work as it sits but it'll give you a starting point.

[Eltu]

I got the image added and working (thanks! :)) - however, the middle section of the CMS needs to be moved down for it not to overlap - how can I accomplish this?

EDIT: I managed to move the section down - however, I got one last problem - I want the image to be aligned left according to the middle section of my CMS grid - right now, if I align it left it aligns with the very edge of the page, making it overlap with the left widgets. How can I solve this?

[Dead Eddie]

Why not just use a static HTML widget. This is kind of what they're there for...

[Eltu]

Thanks for the suggestion - I almost solved it now, by making a custom HTML widget containing a simple <img> tag. The only remaining problem I have, is that I wish to move the entire middle section of the CMS page higher up. Right now it's lower down than the widgets on the side, with a lot of empty space above.

I can move it higher up by editing the vbcms_header_margin stylevar, but then my new image widget doesn't get moved, causing everything to overlap. Attaching images describing the issue. The "Next meeting" text is the image I added with the widget, and as you can see there's a lot of blank space above it - I'd like to move the entire middle section up.