preload background image

[durangod]

Hi, i have a background image and decided rather than have it on repeat to just have it as one image with no repeat, its big enough i think it will be ok 1280 x 720.

I have noticed that the site does hessitate just for a moment when it loads so i thought i might preload that image before anything else loads.

I have seen several methods, css, js, jquery, but all of those do more than i want to do, those examples have to do with preloading if you have a hover and all that.

What i want to know is that is the most efficient method of preloading a large background image? That is all it has to do is load it before anything else loads.

Do i use an onload in the body or do i use css?

Just not sure on this one.

Thanks

[VIPStephan]

Well, what’s the point? Why make people wait for the content for which they are coming just to display a background image at first (or at the same time)? As simple solution I’d really suggest that you should make the image as small as possible and use repeating if possible.

[durangod]

Yeah i kinda figured i was headed the wrong direction when i did that. Ill reduce it and use repeating, thanks.

[durangod]

OK done, 500x500 loads nice but how do i get rid of the lines? I am using a gif as the background, should i use jpg would that help?

[VIPStephan]

Which lines? I can’t sense your image/page, you have to show it.

[durangod]

yes i know and i wish i could but i cant, the client has specifically said no links to the site anywhere, so i have to abide by their wishes. I guess i could create another file and take a snapshot of it and send you that.

Basically what it is is a 500x500 image and it has a slight horrizontal line across the page where the repeat images meet. Nothing vertical, just horrizontal. I did try both jpg and gif and same thing.

If it was both vert and horriz i would say it was the image, the image was made in ps so it should be ok regarding border area.

here is the css if you want that for now.

body{
font-family:verdana;
font-size:11px;
background-image:url(images/bg.gif);
background-position:top;
/* background-color:#000000; */
color:#000000;
}

[VIPStephan]

Well, yeah, create a similar image and post it here. There must be something at the edge. This can happen if the edge of the object doesn’t match the pixel edge and some anti-aliasing occurs.

[durangod]

ok there is the sample attached, i put an arrow that shows the issue. The little box is actually a copy and paste from the site that shows the horrizontal line. Look close its there lol.. Its alot more obvious on the site.

Also it is the css i think because i even took that 500x500 block and cut it smaller in paint and tried it as jpg and still same line.

[bigcasey123]

It looks like a color then a background image lol. Why not just use

background-color:#####;

and make it the same color as the so called "image" lol.


EDIT: Or you can make the images height 1000 (then the line will go off the screen) and then use repeat.

[durangod]

Because it is not just a bg color, it had the site image logo on there in photoshop many times all over that in all directions, but i took them out and just left the first layer for you to view.

And i dont want to make it really long because if i do that i might as well just go back to my large image background that i had in my first post of this topic.

[bigcasey123]

Save the image as .png and see if that works, .png takes away the background color behind the image. If that don't work then i have no clue lol.

[durangod]

tried png and still same line, so im lost as well. lol thanks for your effort it is appreciated.

[VIPStephan]

Please attach the very image you created in Photoshop so I can download it and have a closer look myself.