www.webdeveloper.com
Results 1 to 11 of 11

Thread: Is it possible to have 2 background images?

  1. #1
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211

    Is it possible to have 2 background images?

    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!

  2. #2
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    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.

  3. #3
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211
    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 downloads 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!

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    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.

    http://www.w3schools.com/css/css_ref...asp#background

  5. #5
    Join Date
    Nov 2002
    Posts
    2,632
    http://blog.mooncalf.me.uk/

    Scroll down and the background image stays in the middle. I think that's what you were looking for.

  6. #6
    Join Date
    Nov 2002
    Posts
    2,632
    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.

    http://www.csszengarden.com/

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Here's a very simple example 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.

  8. #8
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211
    Thanks to all of you, I should be able to get it fixed with the examples you've given.

  9. #9
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,147
    one of my latest sites www.williamsons-oldham.co.uk uses a similar technique. Basically you just nest a few divs and apply the backgrounds to them.
    Last edited by DaveSW; 01-13-2004 at 05:21 AM.
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  10. #10
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    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.

  11. #11
    Join Date
    Aug 2003
    Location
    Glasgow, Scotland
    Posts
    211
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles