[personal profile] nikkiscarlet posting in [community profile] style_system
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.

Date: 2010-09-24 09:34 pm (UTC)
matgb: Artwork of 19th century upper class anarchist, text: MatGB (Default)
From: [personal profile] matgb
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).

Date: 2010-09-24 09:52 pm (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
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.

Profile

Dreamwidth style system discussion

June 2025

S M T W T F S
12345 67
891011121314
15161718192021
22232425262728
2930     

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 7th, 2025 04:39 am
Powered by Dreamwidth Studios