Member Avatar for tefflox

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

  • 4 Contributors
  • 18 Replies
  • 210 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by aslittell
Member Avatar for 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>
Member Avatar for 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.

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>
Member Avatar for tefflox

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.

Member Avatar for MattEvans

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>
Member Avatar for tefflox

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

Member Avatar for MattEvans

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

Member Avatar for MattEvans

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...

Member Avatar for tefflox

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.

Member Avatar for MattEvans

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.

Member Avatar for tefflox

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

Member Avatar for MattEvans

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?

Member Avatar for tefflox

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

Member Avatar for MattEvans

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

Member Avatar for MattEvans

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

Member Avatar for tefflox

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

Member Avatar for MattEvans

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

Member Avatar for webecho

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

Edited by Dani because: Fixed formatting
Member Avatar for aslittell

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

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.