|
| |
|
|
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: 424
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?
| |
|
|
|
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.
| |
|
|
|
spitfire
Posts: 424
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.
| |
|
|
|
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.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
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
| |
|
|
|
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.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
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.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
.
