Click to See Complete Forum and Search --> : background images


fatbottoms
12-14-2005, 12:32 PM
i have some questions about background images.

will placing an image in the css body section [ex. url(image.jpg)] , instead of the <body> , reduce the file size?

another words, will it reduce the load time for users?

also, can i place more than one image in the body {} section?

can i place a background image not in the body{}?
ex. .guitar { background: url(guitar.jpg) }

Fang
12-14-2005, 12:49 PM
1. probably not reduce load times and file size difference is negligible
2. only one image in the body
3. A background image can be placed in virtually any element including an image

The Little Guy
12-14-2005, 12:50 PM
Placing an image in the body section will not reduce it's file size. For faster load times, make a smaller image, and have it repeated either horizantally or vertically, or both. You can also turn the scrolling off so the image doesn't move.

Placing it in a "background: url(guitar.jpg)" mainly is for external style sheets, for the ability to quickly change all the backgrounds of many pages by changing one file.

I am not sure about many backgrounds for the body section, since I have never tried it, but if I were to guess i would say no. You could do something like this for sure:

.dog{
position:realative;
background-image: url('dog.jpg');
}
.cat{
position:relative;
background-image: url('cat.jpg');
}

fatbottoms
12-14-2005, 04:11 PM
i tested two different pages, (one with a background image and one without),
and found there is a difference in the load time and file size.

i had trouble attaching the reports, but there was significant difference when i checked through http://www.websiteoptimization.com/services/analyze/
am i reading this wrong?

the only reason i want to do this, is to reduce load time.

if this report is correct, is there a way i can somehow place the dark blue box behind the main image, which is overlapping the css box?


http://bluesrock.atspace.com/zbr.html ( without bckgd img )

http://bluesrock.atspace.com/ztr1.html ( with bckgd img )