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

Question

tefflox 2 Junior Poster

17 Years Ago

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

web-design

4 Contributors
18 Replies
210 Views
3 Years Discussion Span
Latest Post 14 Years Ago Latest Post by aslittell

All 18 Replies

MattEvans 473 Veteran Poster

17 Years Ago

you shouldn't position anything but a <head> section outside a <body> 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 473 Veteran Poster

17 Years Ago

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 473 Veteran Poster

17 Years Ago

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 <body> 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 473 Veteran Poster

17 Years Ago

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 473 Veteran Poster

17 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tefflox 2 Junior Poster · Answer 1 · 2007-01-08T14:11:19+00:00

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 <head> section outside a <body> 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 2 Junior Poster · Answer 2 · 2007-01-08T14:12:59+00:00

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 2 Junior Poster · Answer 3 · 2007-01-08T14:27:09+00:00

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 2 Junior Poster · Answer 4 · 2007-01-08T14:55:56+00:00

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 2 Junior Poster · Answer 5 · 2007-01-08T15:09:21+00:00

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; }

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 6 · 2007-01-08T15:16:26+00:00

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?

tefflox 2 Junior Poster · Answer 7 · 2007-01-08T15:19:17+00:00

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

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 8 · 2007-01-08T15:22:10+00:00

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 473 Veteran Poster Team Colleague Featured Poster · Answer 9 · 2007-01-08T15:23:45+00:00

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

tefflox 2 Junior Poster · Answer 10 · 2007-01-08T15:24:43+00:00

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

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 11 · 2007-01-08T15:28:19+00:00

MattEvans 473 Veteran Poster

17 Years Ago

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

webecho 0 Newbie Poster · Answer 12 · 2007-01-11T05:29:56+00:00

You can set it as a background image for the HTML

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

aslittell 0 Newbie Poster · Answer 13 · 2010-01-21T12:29:40+00:00

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

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

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers