Images and web sites.

[Rianna]

Hello, I've seen a lot of people who put text and all kinds of things into images. They can even make a whole web page out of an image and dump everything into it. How do you put regular web page html into images? Please let me know, thanks.

[WebJoel]

That is probably slice-n-dice from a PhotoShop image. It can be very limiting because content as added will 'bust' the design. Basically, it is more fluid if each section (navigation, header, content, footer, etc) has it's own background that is either seamlessly-tiling (a small image with all four edges that match any other four edges of the same image: see: http://ca.geocities.com/tiling_background_images/), or a positoned background-image with a gradient fade-off effect that blends nicely with a background-color, also stated for the container, like:

<div style="width:200px; height:300px; background: #fff url(images/myImage.jpg) fixed center center;

whereby the picture "myImage.jpg" (which is maybe 50px wide and 150px tall) has ragged white-ish edges which blend nicely into the background-color "#fff" (white), and the image is centered top-to-left.
I did something like that for a ferret page (but aligned image to right, not center: http://ca.geocities.com/troublewp3/)

-It is much more elegant and page-weight reducing than to use a Photoshop image that is exactly the size of the container... and, because of this, the page can 'expand/contract' a bit...

[Rianna]

Thanks very much. lol that was a very cool page. I don't need anything where the text moves to different positions when you scroll though. I need the image to be fixed to one part of the page. Then to have html such as form input fields and text, into the image. So it all moves together when there is a scroll.

[Rianna]

I think its going to work out, thanks for the great tip! Only one problem I am having. While the page is loading it leaves a huge blank white space on the page where the image will be, so I thought maybe I could load a regular div color along with the image hoping the color would load before it, to stop the blank white space. <div style="width:553px; height:50px; background-color: rgb(153, 0, 0); background: url(the.gif);">text</div>But the color isn't loading first at all. How to get a back ground color to load before the image, just like all the other background colors load on the page? Please someone let me know, thank you very much.

[Rianna]

I got it, I just inserted the image div over one with a regular color in it. Works great!