Multiple Background Pics

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Multiple Background Pics

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Multiple Background Pics

Page: [1]


Rocket Boy Posts: 409 Joined: 12/8/2005 Status: offline	Multiple Background Pics - 1/31/2006 18:39:46 This kind of follows on from my CSS ZenGarden thread. I have been looking at various sites but I cannot see how they have produced what I am about to ask. There is no reference to their background images in the page or the style sheet (is it something to do with the xhtml?). Anyway, the question... How do you assign multiple pictures to the background of a page. Positioned next to each other (and below each other) to form one big background pic? I think I am talking about positioning and just setting top and left variables but I can only seem to assign one image.


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 18:47:15 Have you got a mock-up of what you're trying to achieve and what you have coded so far? Could you put up links to a few of the sites you have been viewing, 'cos the image coding must be in there somewhere? (in reply to Rocket Boy)


Rocket Boy Posts: 409 Joined: 12/8/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 19:14:23 Sorry Spitfire... There is a link to an example site at the top of my original post which is right here http://www.frontpagewebmaster.com/m-310127/tm.htm I haven't got round to building anything yet because I cant work out how. I have been thinking there is some way to use background: url('...') multiple times but completely unsure how to then apply the position settings. I Don't really know what I'm talking about to be honest but hopefully you do (in reply to Rocket Boy)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 19:41:09 OK, RB, one step at a time As you said yourself on the earlier thread, "Gotcha, lots of different images". As Tailslide said, "There are several different background images attached to different divs " Now go back to that ZenGarden site and click on the CSS link at the bottom. It actually takes you to the css validation results. Ignore the dross at the top which are warnings about background/foreground colors, that's for another day. But look at/study the CSS below that. You'll see that many divs have a background declaration like background : url(girl.jpg) no-repeat top right; which is that good looking woman at the top. This code appears on #container. The title at the top is also a background on #pageheader. Each of the other little piccies is in a separate div. Just a word of caution using this technique. There is a great temptation to make a load of divs just to so that each can contain a different background piccie. This can bloat your code and rubbish any semantics you may be trying to work towards - it's a bit like reverting to infinitely nested tables, spacer gifs and the like. (in reply to Rocket Boy)


Rocket Boy Posts: 409 Joined: 12/8/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 19:51:41 The mistake I was making was was looking at the CSS link located near the top of the page on the right but... Clicking the clink at the foot of the page gives me a referrer error. Thanks though, I completely understand what you say with regard to the dangers of multiple divs and the ZenGarden site is clearly just for CSS techniques and examples, no real funcionality so... Would the general recommendation be to stick with row and column backgrounds or is this the wrong direction also? My thing is... I want graphical bright websites but there is the obvious concern about loading times. (in reply to spitfire)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 20:07:56 That ain't no CSS link near the top of the page. If you mean CSS with a dotted underline, that's a way of styling <abbr> or <acronym>. Hover over it and it should throw up what is apparently a tooltip saying "Cascading Style Sheets". The other dotted underlines do something similar. Stick with the CSS link at the bottom of the page - you may have hit a temporary glitch 'cos it has worked for me about 4 times very recently. I didn't mean to scare you off using backgrounds on several divs. But those divs should be essential to the layout of the page, not just put in there for the visual aspects. Now, forget row and column :shudder at table analogy: and think placement of divs. You're right, of course, ZenGarden is an exercise in producing good looking/stunning sites using CSS and just perfect for inspiration and learning CSS coding. (in reply to Rocket Boy)


Rocket Boy Posts: 409 Joined: 12/8/2005 Status: offline	RE: Multiple Background Pics - 1/31/2006 21:12:28 OK... It's all good, I didnt mean table rows/colums though. I meant #col-center{background...} and #col-header{background} etc... Sorry about the lack of explanation. I might be getting a bit ahead of myself with this imagary thing but definitely something I will continue to work on, thanks for all the help SF. (in reply to spitfire)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/1/2006 3:16:16 Just adding to what Spit said - unless you're talking about a single image (like the one of the girl in the Zen Garden example) you can quite often just use a really thin sliver of the background image and repeat it in the x or y axis across or down the page - that way your image weight is only a tiny fraction of what it would be if you had a big gradient background (for instance). You'll find that many people who use these techniques tend to use a small image repeating background a lot on a page while trying to keep the big single images down to a minimum. That way you're keeping your loading time down. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Rocket Boy)


davidrandall Posts: 82 Joined: 7/28/2005 Status: offline	RE: Multiple Background Pics - 2/1/2006 7:51:06 For 2 background images, you could assign one to the html tag and one to the body tag Dave (in reply to Tailslide)


drogers Posts: 142 Joined: 5/7/2004 Status: offline	RE: Multiple Background Pics - 2/1/2006 10:20:21 I tried to turn FrontPage into a drag and drop editor last night just to see what the results would be and I was surprised to find both IE and FF compatible code generated quickly and easily, with a fairly complex layout. http://www.invisual.us/finnominal/ If you view the source, you'll see what FrontPage did to each element, some of which are images, some are just formatted space or text, to create boxes, all ordered by Z-index to overlay the imagery. I litterally put all my images on the page, changed the style property of the images and then dragged and dropped them where I wanted them. (in reply to davidrandall)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/1/2006 10:27:18 The problem with doing that drag and drop thing is that FP uses absolute positioning to place stuff where you drop it - this isn't generally a "good thing" and can cause you loads more problems than it solves. Much better to use relative positioning - more flexible. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to drogers)


drogers Posts: 142 Joined: 5/7/2004 Status: offline	RE: Multiple Background Pics - 2/1/2006 15:22:31 What is wrong with absolute positioning? I only quickly tested it in the latest non beta versions of IE and FF and it put everything where I wanted it. This was just an initial test to see if it's feasable to design this way. I'm genuinely interested in any problems it might cause. (in reply to Tailslide)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/1/2006 18:00:48 It's not that you shouldn't use AP - it's just that it's hard to get right unless you're really sure of what you're doing. There are too many possible traps to fall into. You need to be very careful about what you're positioning the aboslute postioned item in relation to - if you position it in relation to the viewport then you risk getting overlapping and other odd effects at different screen resolutions. You also risk having text breaking out of one div into another if the font size is increased by the user or if more text is added. You need at least a certain amount of flexibility in a web site and if you have divs "nailed" to the screen all around each other then that flexibility is gone. If you add a load of text to your main content box in your example it runs out of the box completely because there's no room for expansion. I use AP - just not for big stuff, it's too hard to get right. It's better to let the divs "go with the flow" they expand and contract naturally according to the screen size, font size or text length. Believe me I'm really not setting myself up as some CSS expert 'cos I'm learning all the time too just like everyone else - but I've been using CSS layouts for two years solid and I've tried the AP route and it just isn't reliable enough for the average website. Using relative positioning is much safer and easier in the long run (even though the reverse initially looks to be true). _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to drogers)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 2/1/2006 18:07:06 quote: I'm genuinely interested in any problems it might cause. Absolute positioning pitfalls Absolute positioning pros and cons Edit: Oops, took too long, my bookmarks are a complete mess. (in reply to drogers)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/1/2006 19:31:11 I did this really quickly so it the background images aren't neatly lined up and various other bits would need tidying but still it shows that a relatively positioned layout can work cross-browser (both mac and pc) Exceptions: IE4 and NN4 fed plain styles as they mangle CSS. IE5 mac doesn't like my image replacement method - you could just stick the image in the HTML if that bothers you: http://www.browsercam.com/public.aspx?proj_id=224597 In reality I'd feed IE 5 and 5.5 some different rules to deal with their box model. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to spitfire)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 2/2/2006 5:57:11 Tail Has that used up your browsercam freebies? Or, am I hacturly haddressing a browsercam haccount 'older? (in reply to Tailslide)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/2/2006 6:44:58 Bow before me pleb! _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to spitfire)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 2/2/2006 6:56:01 Business is doing well then - congrats - mighty Queen of Cyberspace. Where's that touching-forelock smiley? Ah will this do to ingratiate me with Milady? (in reply to Tailslide)


Tailslide Posts: 6755 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Multiple Background Pics - 2/2/2006 6:58:22 "mighty queen of cyberspace" I like that - would it be too much if I put it on my busniess cards do you think? I did have an individual account - expensive but worth it for my sanity or what's left of it. Now got a group account via fundable which means I can now also afford to buy food which is a "good thing" _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to spitfire)


spitfire Posts: 421 Joined: 8/6/2005 Status: offline	RE: Multiple Background Pics - 2/2/2006 7:07:24 quote: ORIGINAL: Tailslide "mighty queen of cyberspace" I like that - would it be too much if I put it on my busniess cards do you think? Not at all: excellent idea, but you'd have to think very carefully about your logo (in reply to Tailslide)