nikkiscarlet: A man stands looking at the sky.  Directly above his head, two clouds form a perfect question mark. (?)
nikkiscarlet ([personal profile] nikkiscarlet) wrote in [community profile] style_system2010-09-24 04:43 pm

Multiple images in the header?

I'm modifying a Modish layout, and I was wondering if it was in any way possible to place more than one image in the header, or if it's impossible to do with CSS alone? I'd like to have a header that stretches with the page/browser/resolution, and the only way I can think of doing that in this case is to have two (or more) images sitting on either side of the header. Would welcome other suggestions, as well!

Thanks in advance.
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Default)

[personal profile] matgb 2010-09-24 09:34 pm (UTC)(link)
Yup, CSS can stretch images (the picture of my in my sidebar is set to be 50% of the width of the sidebar, for example)

Except...

I don't actually know how to put the image in as a background CSS image then stretch it. However, depending on what effect you want, it's possible to have a small image repeat for the length of the area it's covering, the Gradation sitecheme header image is about 50px wide but goes across the whole area.

So if you want something similar to the Gradation effect, easy to do, if you want a stretching actual image with non-repeating graphics, not as easy with just CSS (but easy if you want to make a layer code).
branchandroot: oak against sky (Default)

[personal profile] branchandroot 2010-09-24 09:52 pm (UTC)(link)
Couple possibilities. One is to use the CSS3 option for scaling a background image or the one for multiple background images in a single box, which will only work on the very latest Firefox, Safari, Opera and Chrome, not on IE at all. Another is to load up a copy of the forthcoming Bannering style, which is written to take two images in the header (you can find it at [site community profile] dreamscapes).

It may be easiest, though, to add some custom CSS that puts one image in #header and the other in #header .inner.