Image overlay, postition problem

Neut · Post by **Neut** » Sun Jan 14, 2007 3:26 am

I want to place an image as an overlay over my template. I noticed somehow I cannot place the image exactly where I want.

I started with adding this line to the <body> section if the of index.tpl:

<img style="background-color:transparent; position:absolute; top:0; right:0; border-width:0" src="bijt.gif" alt="Bee!" >

This results in the image being placed against the upper-right corner of the browser-window.

I want the image more to the right, so that the bee does not cover the searchfield (andreas08 template).Example: http://www.3gz.com/test/ .
For this I changed the “right”-value from the line above. As soon thisvalue is higher than 0, the image gets placed right from the center (but too far). In- or decreasing the value has no effect, as long it’s higher than 0, the image always ends up in this position.

Also, the Top-value is ignored.
I moved the line throughout the body-section, no result. I tried it with the Kubrick theme: same problem, I have no control in where the image is placed.

I’m lost, I do not see what is causing this, what’s overriding my settings. Please, who can help me solving this?

carl_galloway · Post by **carl_galloway** » Sun Jan 14, 2007 4:42 am

This is a very common problem and you are on the right track, but there is a very important step you are missing.

If you make position:absolute, the browser assumes you mean in relation to its parent div. If the image parent is body, then it goes to the top of the page like you describe. The second part of this is that if you want the image to be positioned absolutely within a div then the parent div needs a position:relative

So, to make it position absolute within the header, place the html code inside the header div, and make the header position relative. It should work now.

Good luck, Carl

Neut · Post by **Neut** » Sun Jan 14, 2007 1:20 pm

Hi, thanks for your reply.

I tried 'relative' but then the image gets placed embedded within the template (occupying it's own space) instead on top of it. I checked all settings on http://www.w3schools.com/css/. So, when I use 'relative' seems to be the same as 'static' (but it should not be).

I'm still lost. Must be overlooking something.

carl_galloway · Post by **carl_galloway** » Sun Jan 14, 2007 6:57 pm

Could you try giving the top and right positions an absoluite value such as 200px instead of 200 which the browser has to interpret?

You could also put your img code into the pagetop html but before the header, so
body -> pagetop -> beeimage -> header ->

Then make sure that pagetop is position:relative and the bee image is position:absolute

If this still doesn't work, then you may have to add a wrapper div around everything and even put your bee image into a div and make it a background image in your stylesheet so your page might look like this

body -> wrapper -> div.beeimage -> pagetop ->

The styles for this might be;

#wrapper {position:relative; margin:0; padding:0;}
.beeimage {position:absolute; top:0; right:200px;background:transparent url({TEMPLATE_PATH}/img/bijt.gif) no-repeat;}

Neut · Post by **Neut** » Sun Jan 14, 2007 8:49 pm

Wow, CSS-Jedi master!
Let me see if I can do this. It's a shame the weekend is nearly over.
I will let you know if I made any progress.

carl_galloway · Post by **carl_galloway** » Sun Jan 14, 2007 8:56 pm

CSS-Jedi master? I like that, shame its not true... bummer

Neut · Post by **Neut** » Sun Jan 14, 2007 10:55 pm

Could you try giving the top and right positions an absoluite value such as 200px instead of 200 which the browser has to interpret?

Nice one! This helps, and now that its does work, placing the image like this was not a good idea of me. Since it's now linked (a certain amount of pixels) to a window border, the image is displayed in a different place for all the viewers, since it's most likely that most of us use a differtent browserwindow size/screen resolution. Ah well, at least I learned something here.

I tried the wrapper, but the image does not appear... I'll do anothor attempt later this week.
Cheers!