background image - z-depth

Dreamweaver & Flash (ahh ahhh) plus Web related Tutorials & Resources, HTML, CSS, PHP, Flash or whatever.
Post Reply
morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

background image - z-depth

Post by morphim » September 27th, 2006, 10:12 am

I have a css layout (about 5 areas) and I want a single background image to run across all of them. Is there an easy way to do it, rather than chopping it up and making each bit a BG in each specific box?
The image is approx 800 x 600. and is like diagonal watermark type image of this company's logo.

The problem is that IE and Firefox alter the layout by a couple of pixels so the image might not line up correctly.

Is it possible to use z-indexing (I think that's what it's called?) where you basically specify layers.
What I'm thinking is having the BG image at the bottom then put the rest of the layout on the next level. Is this possible? Or am I thinking out of my arse!!

Any other ideas?

Thanks in advance :D
It's always a sunny day above the clouds : )

Paul Stones
Ernie's rubber duckie
Ernie's rubber duckie
Posts: 283
Joined: January 6th, 2006, 11:00 pm
Location: Onanism zone

Post by Paul Stones » September 27th, 2006, 2:54 pm

Maybe I'm not picking this up right, but why not enclose all your areas in a wrapper id and set the background of the wrapper to be your image?

Simon
A Pig in Space
A Pig in Space
Posts: 484
Joined: January 7th, 2006, 10:55 am
Location: Devon
Contact:

Post by Simon » September 27th, 2006, 10:49 pm

Paul Stones wrote:Maybe I'm not picking this up right, but why not enclose all your areas in a wrapper id and set the background of the wrapper to be your image?
yeah! agree I was thinking the same

Code: Select all

#container {
   width: 800px;
   height:600px;
   padding:0;
   margin:0;
   background url ("images/yourimage.jpg"); 
}
then place the rest with in the container

Code: Select all

<div id="container">
put your stuff here....

</div>
etc etc

something like this :
there is a god, and i am him

morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

Post by morphim » September 28th, 2006, 8:52 am

You are correct. However, some of the areas are graphic (such as the banner) I'm guessing to make this work they would need to be png with transparency, which I don't want to do because of the larger file sizes.

However, I might be able to fudge what you suggest around the graphics. How does the css layout transparency work?

Do I need to specify my internal layout BGs as being 'none' or are they transparent by default?
It's always a sunny day above the clouds : )

Simon
A Pig in Space
A Pig in Space
Posts: 484
Joined: January 7th, 2006, 10:55 am
Location: Devon
Contact:

Post by Simon » September 28th, 2006, 11:26 am

if you mean or talking about .png then they automatically work

WAIT FOR it Except in some browsers, look for transparency/png hack

if your not then :shock: i do not understand :cry: :wink:
there is a god, and i am him

cow
A Pig in Space
A Pig in Space
Posts: 309
Joined: January 6th, 2006, 10:44 am
Location: 4th rock from morphims house
Contact:

Post by cow » September 29th, 2006, 8:45 am

morphim wrote:You are correct. However, some of the areas are graphic (such as the banner) I'm guessing to make this work they would need to be png with transparency, which I don't want to do because of the larger file sizes.

However, I might be able to fudge what you suggest around the graphics. How does the css layout transparency work?

Do I need to specify my internal layout BGs as being 'none' or are they transparent by default?
Why not use gif images with transparency? As for any divs contained within the 'wrapper' div, they'll be transparent (in respect to their bg) unless you specify something else.
<? include['cows go moo'] ?>

morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

Post by morphim » September 29th, 2006, 9:30 am

Hello Cowman 8)

Cheers for that. It's a bit complicated to explain the exact layout but you've answered my question; thanks.
I forgot gifs supported transparency. :roll: I don't do this stuff that often and haven't used gifs for years. I should be able to do what I'm after now.
I have the layout up and running now but I sliced the image up. This suggested way will make it quicker and less messy.

Fanks all for your input :D
It's always a sunny day above the clouds : )

Post Reply