•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,125 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,767 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3156 | Replies: 17
 |
•
•
Join Date: Jul 2006
Posts: 158
Reputation: 
Rep Power: 3
Solved Threads: 0
Junior Poster
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.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
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:
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>
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jul 2006
Posts: 158
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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:
<div style="position:absolute;top:0;left:0;">(picture here)</div>
•
•
Join Date: Jul 2006
Posts: 158
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
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.
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>
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jul 2006
Posts: 158
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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
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 3:29 am. Reason: unclear
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
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
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 3:35 am.
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jul 2006
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
•
•
•
•
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...
If it only works in Internet Explorer; it doesn't work.
•
•
Join Date: Jul 2006
Posts: 158
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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
Location: Deptford, London
Posts: 963
Reputation:
Rep Power: 5
Solved Threads: 48
Posting Shark
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.
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.
If it only works in Internet Explorer; it doesn't work.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- How to get the javascript objects in html body tag (JavaScript / DHTML / AJAX)
- Accessing JavaScript objects in the Body Tag (JSP)
- I Dont Know How To Change The Way My Site Looks! Can Someone Help Me?? (Site Layout and Usability)
Other Threads in the HTML and CSS Forum
- Previous Thread: safari bug
- Next Thread: Css help for a newbie -- HELP !!
