HTML and CSS

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

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

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

Jan 8th, 2007

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

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

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

Jan 8th, 2007

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div style="position:absolute;top:0;left:0;">(picture here)</div>
<div style="position:absolute;top:0;left:0;">(picture here)</div>

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

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

Jan 8th, 2007

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.

•

Originally Posted by MattEvans

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:
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
<div style=&quot;position:absolute;top:0;left:0;&quot;>(picture here)</div>
<div style="position:absolute;top:0;left:0;">(picture here)</div>

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

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

Jan 8th, 2007

I don't mean outside the body section of the page but literally outside the tag. Sorry.

•

Originally Posted by tefflox

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.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

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

Jan 8th, 2007

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.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

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

Jan 8th, 2007

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

Last edited by tefflox; Jan 8th, 2007 at 4:29 am. Reason: unclear

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

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

Jan 8th, 2007

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.a...und-attachment

Last edited by MattEvans; Jan 8th, 2007 at 4:35 am.

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

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

Jan 8th, 2007

•

Originally Posted by MattEvans

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

http://www.w3schools.com/css/tryit.a...und-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...

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

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

Jan 8th, 2007

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.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

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

#10

Jan 8th, 2007

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.

Plato forgot the nullahedron..