943,522 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > How to fix an image outside the <body> tag?
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jan 8th, 2007
0

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

Expand Post »
Can this be done? I need the image in a certain place on the page, within a div of its own.
Similar Threads
Reputation Points: 12
Solved Threads: 1
Junior Poster
tefflox is offline Offline
174 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

Re: How to fix an image outside 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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div style="position:absolute;top:0;left:0;">(picture here)</div>
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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.
Click to Expand / Collapse  Quote 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:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div style=&quot;position:absolute;top:0;left:0;&quot;>(picture here)</div>
Reputation Points: 12
Solved Threads: 1
Junior Poster
tefflox is offline Offline
174 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

I don't mean outside the body section of the page but literally outside the tag. Sorry.
Click to Expand / Collapse  Quote 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.
Reputation Points: 12
Solved Threads: 1
Junior Poster
tefflox is offline Offline
174 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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 and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <body>
  3. (everyything you want to show should be in here)
  4. </body>
  5. <div>
  6. (anything you put here is illegal, and will not work atall on some browsers)
  7. </div>
  8. </html>
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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
Reputation Points: 12
Solved Threads: 1
Junior Poster
tefflox is offline Offline
174 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

Click to Expand / Collapse  Quote 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...
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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.
Reputation Points: 12
Solved Threads: 1
Junior Poster
tefflox is offline Offline
174 posts
since Jul 2006
Permalink
Jan 8th, 2007
0

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

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.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Up Load
Next Thread in HTML and CSS Forum Timeline: Photo gallery





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC