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