Is it possible to have 2 background images?

liunx

Guest
I ditched frames in favour of putting an image across the top of the page (a logo). I did this as a background image aligned to the top of the page then set a margin to place the text below it.

The problem that I have now, is that I'd like to put a different backgroung image in the centre of each page as well.

I'm not too sure if this is even possible! Does anyone know if it is possible?

My CSS knowledge is far from perfect. I've got the title in an external style sheet. I thought the second image could go in as an inline style?

Any ideas/pointers would be appreciated!No it is not possible to place two images on the canvas using CSS unless you give a URL of the page in question it's hard to tell exactly what you are after.I'm writing the 'bare bones' of an Intranet, so it's not on the web!

To be honest I didn't think it could be done, but people on this forum know way more than I do (or probably ever will....but hey I can try!!)

What I'm trying to acheive...without the use of frames, is a heading (company logo). Some of the pages are going to have Download s of training manuals we've got for things like word, excel and bespoke software for our users. Some of the pages go quite far down so I thought it might be a good idea to stick an image in the background that says 'Excel Notes' (or whatever) so that the user is always aware of the page that they're on.

I'm more than a bit confused by the whole CSS positioning, I've read some stuff, but aaargh, quite hard to get your head round it!

I'm sure I'll come up with something!

Thanks anyway!I would have to see more of what you actually trying to do, but from what playing around I have done trying to get two background-images at once, I don't think it would work. I tried using two classes, and then a class and a id and it still only used the last one defined. I'm guessing here, but if all you want is an image to always be showing as a person scrolls down then you should use a background image with a fixed position.

<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_reference.asp#backgroundhttp://blog.mooncalf.me.uk/">http://www.w3schools.com/css/css_refere ... alf.me.uk/</a><!-- m -->

Scroll down and the background image stays in the middle. I think that's what you were looking for.More thinking, check out the link below and look how they use a background image within the <h1> tag and then you could use the <body> tag for the other background image.

<!-- m --><a class="postlink" href="http://www.csszengarden.com/Here's">http://www.csszengarden.com/Here's</a><!-- m --> a very simple example (<!-- m --><a class="postlink" href="http://blab-n-lab.home.comcast.net/lab/twoback.html">http://blab-n-lab.home.comcast.net/lab/twoback.html</a><!-- m -->) of a "page" background overlayed with a "content" background. Narrow your browser window up enough to force vertical scrolling to see the effect of the fixed content background but don't expect that to work with IE.Thanks to all of you, I should be able to get it fixed with the examples you've given.one of my latest sites <!-- w --><a class="postlink" href="http://www.williamsons-oldham.co.uk">www.williamsons-oldham.co.uk</a><!-- w --> uses a similar technique. Basically you just nest a few divs and apply the backgrounds to them.I know what you were after now a fixed position div as a header to simulate a frame and a fixed central image in the lower pseudo frame.

Much like with the Mozilla test suite.Yes, that's it exactly......you're explanation of what I'm looking for is so much better than mine!!!:)

I've not actually had a chance to have a go at changing it yet, but I've no doubt that thanks to the suggestions here I'll get it!
 
Back
Top