Forums | MacLife

Redstone · 2005-02-03 10:59 am

Hi , I'm finally learning css to bring my webdesign skills into the 20 century. smile

Code:

<head>
<style type="text/css">
img.main {
position: absolute;
width: 60%;
height: 70%;
left: 20%;
top: 15%;
Z-index: -1
}
</head>
<body>
<center><src img=logo.gif></center>
<img class="main" src="img.jpg">

works great in safari, image doesn't show in firefox.

The idea is to have the img as a background, with changeable size according to the page size.

Thanks

Danny

Last edited by Redstone (2005-02-03 12:08 pm)

Redstone · 2005-02-03 11:02 am

ps. it also works ok in IE mac

registered_user · 2005-02-03 11:14 am

I'm pretty sure it's the z-index. You don't need it, and it's causing your grief.

Redstone · 2005-02-03 12:01 pm

actually I do need it, as I am placing another image on top of this one..

Gipetto · 2005-02-03 12:04 pm

The -1 index might be pushing it behind something else.
Give this a z-index of 2 and the next object a z-index of 5...
that is, if you're absolutely positioning both objects.

Gipetto · 2005-02-03 12:04 pm

Is there a linkie poo to look at?

registered_user · 2005-02-03 12:06 pm

If you're hardcore into keeping the z-index, set it (and all of the others) to a positive number and that ought to do it for you too.

Redstone · 2005-02-03 12:15 pm

I've edited the original post to show the code the way it works (as intended in safari)
I'll upload the page to my server for you viewing pleasures.

thanks for the quick replies you guys...

Redstone · 2005-02-03 12:20 pm

ok :
this is how it should look, and works in safari and ie.
this is with the suggested z-index changes but it doesn't work... but am I doing wrong?

thanks

registered_user · 2005-02-03 12:25 pm

z-index only applies to elements with absolute positioning. since logo.gif is not positioned absolutely, it renders in the order in which it appears in the markup -- beneath the image that comes after it.

You need to make the logo position: absolute for it to use the z-index.

Redstone · 2005-02-03 12:28 pm

yeah, I sort of got it. However, how do I position absolute and keep the img in center?
I tried to align it, doesn't work!
if I'd use the "left:..." I'll need to know how wide it is to etc..

thanks again

registered_user · 2005-02-03 12:34 pm

You could fiddle with percentages, or you could wrap it in a block level element that spans the entire width of the screen (like a div) and set the the parent div to be positioned absolutely and then set that div's content to text-align: center.

Redstone · 2005-02-03 1:21 pm

ok, solved by adding this div :

Code:

#log {
position: absolute;
width: 60%;
height: 70%;
left: 20%;
z-index: 2;
}
....
<div id="log"><center><img src="logo.gif" width=60%></div>

funny enough though, if I insert this line before using the <img class=main...> the main get position within the new element, even after closing the <div>

thanks for the quick help.

Danny

zakatak · 2005-02-03 1:27 pm

Here's the problem: Firefox. It doesn't deal with z-index properly. As far as it is concerned the body's background is z-index: 0; and anything then that is negative then places it 'below' the body's background properties, in affect hiding it. I found this out the other day while playing with z-index's...

px · 2005-02-03 2:59 pm

don't forget your doctype wink

Redstone · 2005-02-03 3:55 pm

px wrote:
don't forget your doctype

sorry, but wh??

ABigSmall · 2005-02-03 5:35 pm

Redstone wrote:
px wrote:
don't forget your doctype
sorry, but wh??

ALA Article: DOCTYPE!

Abu · 2005-02-03 10:49 pm

Um, if you want the image to be the background for your page, you should set it as the background using your CSS. Like so:

Code:

body {
    background: url(path/to/image.jpg);
}

You can even center it on the page by doing this instead:

Code:

body {
    background: url(path/to/image.jpg) no-repeat 50% 50%;
}

The no-repeat keeps it from tiling. The first 50% centers it horizontally and the second 50% centers it vertically. 50% 0% would center it horizontally and pin it at the top. 0% 100% would pin it to the bottom-left corner. And so on. There is no reason whatsoever to be using an <img> tag in your code.

Redstone · 2005-02-04 3:08 am

px wrote:
don't forget your doctype

it is true, I do ignore doctype. but never really worked with anything apart from html and php so guess there was no real need blush

as for the img as the background, I did that, however then the image size doesn't change with the page size...

in any case, it is all solved and working now.

thanks for th quick help you guys.
You're going to see much more of m here, since grasping this css is a fun process.

Forums | MacLife

#1 2005-02-03 10:59 am

new to css - why doesn't this work in firefox?

Code:

#2 2005-02-03 11:02 am

Re: new to css - why doesn't this work in firefox?

#3 2005-02-03 11:14 am

Re: new to css - why doesn't this work in firefox?

#4 2005-02-03 12:01 pm

Re: new to css - why doesn't this work in firefox?

#5 2005-02-03 12:04 pm

Re: new to css - why doesn't this work in firefox?

#6 2005-02-03 12:04 pm

Re: new to css - why doesn't this work in firefox?

#7 2005-02-03 12:06 pm

Re: new to css - why doesn't this work in firefox?

#8 2005-02-03 12:15 pm

Re: new to css - why doesn't this work in firefox?

#9 2005-02-03 12:20 pm

Re: new to css - why doesn't this work in firefox?

#10 2005-02-03 12:25 pm

Re: new to css - why doesn't this work in firefox?

#11 2005-02-03 12:28 pm

Re: new to css - why doesn't this work in firefox?

#12 2005-02-03 12:34 pm

Re: new to css - why doesn't this work in firefox?

#13 2005-02-03 1:21 pm

Re: new to css - why doesn't this work in firefox?

Code:

#14 2005-02-03 1:27 pm

Re: new to css - why doesn't this work in firefox?

#15 2005-02-03 2:59 pm

Re: new to css - why doesn't this work in firefox?

#16 2005-02-03 3:55 pm

Re: new to css - why doesn't this work in firefox?

px wrote:

#17 2005-02-03 5:35 pm

Re: new to css - why doesn't this work in firefox?

Redstone wrote:

px wrote:

#18 2005-02-03 10:49 pm

Re: new to css - why doesn't this work in firefox?

Code:

Code:

#19 2005-02-04 3:08 am

Re: new to css - why doesn't this work in firefox?

px wrote:

Board footer