How to fix an image outside the <body> tag?

Can this be done? I need the image in a certain place on the page, within a div of its own.

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

you shouldn't position anything but a section outside a section in your code.

but, you can make the div with the image in it on a separate 'layer', by putting it into a div like this:

<div style="position:absolute;top:0;left:0;">(picture here)</div>

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

Yes, however that doesn't fix the image in place. I use all kinds of div sections, but I'm unaware of any technique to fix an image (keep it from scrolling) outside of the body tag. you shouldn't position anything but a section outside a section in your code.

but, you can make the div with the image in it on a separate 'layer', by putting it into a div like this:

<div style=&quot;position:absolute;top:0;left:0;&quot;>(picture here)</div>

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

I don't mean outside the body section of the page but literally outside the tag. Sorry. Yes, however that doesn't fix the image in place. I use all kinds of div sections, but I'm unaware of any technique to fix an image (keep it from scrolling) outside of the body tag.

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

is this problem similar to yours?

http://www.daniweb.com/techtalkforums/thread63900.html

either way, you can't position anything outside the body tag or section. you can make it appear to be so, but breaking HTML rules causes weird behaviour.

<html>
<body>
(everyything you want to show should be in here)
</body>
<div>
(anything you put here is illegal, and will not work atall on some browsers)
</div>
</html>

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

There's still some confusion. Here is what I want to do, in pseudo-code:
body
div style=fixed background image(image)/div
div style=text content of page(text)/div
etc.
/body

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

I can't see that image.

There is a 'fixed' CSS attribute that gets mentioned in that thread.

A little research shows that it's not properly supported in IE6.. But it also shows some workarounds:

http://www.cssplay.co.uk/layouts/fixed.html

If you're already using this, I don't understand the question.

The answer to:
How to fix an image outside the tag? Can it be done?

is No. you can't reliably do anything with elements/tags/sections that are not in the correct hierachal position. But, there should never be a need to break the HTML hierachy in an HTML file.

EDIT:
I see your edit, there is a way to make a fixed background:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

EDIT: I see your edit, there is a way to make a fixed background:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

If you do that, you could use the body section to supply the background, rather than another div.

It's better to use the body section for backgrounds, divs sometimes don't fill the body's vertical height without hacking around with margins and paddings...

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

I'm trying this in the w3schools editor, but it isn't working... div#d { position: absolute; top:33%; left:33%; background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed; } that's what i'm trying to do.

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

your div has no width or height. if it has no content, then it will be approx. 0 pixels high and wide, and will not show up atall.

this is always true, but is more noticeable with absolutely positioned divs.

either put some non-visible content in the div (hacky), or set a fixed width and height (advised).

you may find that that div does start scrolling with the page as it has a fixed anchor point. I dunno though: there is definately a calculatable compensation for the background attachment, it's just a question of whether browsers chose to make it.

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

This isn't working --- div#moon { position: absolute; top: 20%; right: 20%; width: 120px; height: 127px; background-image: url('/06/fullmoon.jpg'); background-repeat: no-repeat; background-attachment: fixed; }

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

it would be more helpful for me and anyone else who may have some helpful ideas, and thus for yourself; if you say what isn't working.

- did it crash your computer? (hopefully not)
- did it show up fine in the correct place initially, but not remain fixed with relation to scroll?
- or somewhere inbetween?

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

Sorry, I'm tired. Okay, the image doesn't show up at all for the above code. I'm using Firefox 2.

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

but, having a stab at it.

I guess the problem is as I mentioned:

you may find that that div does start scrolling with the page as it has a fixed anchor point. I dunno though: there is definately a calculatable compensation for the background attachment, it's just a question of whether browsers chose to make it.

The background position is fixed relative to the scroll within the div, but that div isn't ever going to scroll

Is there a reason you can't use the body tag for the background?

I would try using a fixed position div behind the main section of your page... It doesn't work in IE usually as I said, but there's workarounds, as I said: http://www.cssplay.co.uk/layouts/fixed.html

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

Sorry, I'm tired. Okay, the image doesn't show up at all for the above code. I'm using Firefox 2.

set the div background or borders to blue and see if you can see it.. that CSS should work for an absoulute position

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

Thanks for helping. I'll get back to this tomorrow.

tefflox

Junior Poster

174 posts since Jul 2006

Reputation Points: 12

Solved Threads: 1

5 Years Ago

0

My pleasure; post back if you're still having problems.

MattEvans

Veteran Poster

Moderator

1,386 posts since Jul 2006

Reputation Points: 522

Solved Threads: 64

5 Years Ago

0

You can set it as a background image for the HTML
[code] html{background-image:url(whatever);position:fixed;top:0,left:0;}

This would fix the image in the top left corner of the page BEHIND anything else on the page - this might be what you're looking for.

HTH

webecho

Newbie Poster

20 posts since Aug 2006

Reputation Points: 10

Solved Threads: 1

2 Years Ago

0

If you are trying to do this solely in HTML, just take your image

<img src="smileyface.gif">

then add a style tag in there with a fixed position

style="position: fixed;"

after that if you want to move it vertically or horizontally just add the appropriate positions into the style tag. Here is everything put together:

<img src="smileyface.gif" style="position: fixed; top: 50px; left: 800px;">

Hope this helps!
Amanda

aslittell

Newbie Poster

10 posts since Jan 2010

Reputation Points: 10

Solved Threads: 0

How to fix an image outside the <body> tag?

This article has been dead for over three months