Background image

[smokeyb]

I want to use a bckground image for my main section of my 3 frame page (top left and main), the image is 500x700 with the company logo faded in (don't worry I have this image down to 7k which I am happy with). The same image will be used for every page displayed in that frame, but what is the best way to make this image load only once? Will it automatically cache and be re-used or do I have to do something with CSS? I thought about simply using it as a "background" but it tiles and I have the page set up in such a way that all 3 frames look like the same image, so tiling destroys the illusion.
Can any of you clever people help me?
Smokey

[Birdman]

Yes, I would put it in an external stylesheet. Something like:

body{
background: url(path/to.img) no-repeat;
}

Then call the stylesheet in the head of the html:

<link rel="stylesheet" href="style.css" type="text/css" />

Now, your stylesheet and the images should be cached after the first view.

[smokeyb]

Thanks for the advice.
I found 2 problems when I tried to use CSS: the first was that only a part of the image was showed along with a line of text, then when your returned (using shift) the next part of the image was added and so on until it was complete, I had to return well below the bottom of the image for it all to show in a previewed page. I dont want text all the way to the bottom anyway. The second problem is that no matter how I align and position the image in the style sheet, there is a white border that always remains top and left, and that butts up next to the other frames. I may just use it for the opening page and use a bacground colour for all the others but that would be a shame eh.
Any suggestions
Thanks, Smokey

[Birdman]

You can fix problem one by adding a height value and you can fix prob two by setting margin to zero. Some browsers automatically add margin to the body.

body{
background: url(path/to.img) no-repeat;
margin: 0;
height: npx;
}

[smokeyb]

Thanks for helping.
I have got the style to show the image by specifying a box the same size as the image and other bits of fiddling around, but I am completely ignorant about about what I can do now. I cant seem to position all my text in the right position, it just seems to want to start hard left? I have tried using layers in DW but it's proving to be a little tricky ie; I have to layout all the layers and text before i apply the style. Can anyone tell me what I am doing wrong (or right as the case may be)?
Smokey

[Birdman]

Use the margin property to align the text as follows:

margin: 0px 0px 0px 0px;

And each value applies in this order:

top, right, bottom, left (remember..clockwise..padding is the same too)

Check out w3schools.com, w3c.org or Nick_W's CSS Crash Course [webmasterworld.com] for more.