Tue, 2018-11-20 23:59
I am learning CSS so dont shoot me with bad attitude.
In this code I am learning how to use sprite in CSS.
<!DOCTYPE html> <html> <head> <title>CSS</title> <style> body {background-color: powderblue;} #img1{ background: url("testCSS.png") 0px 0px; /*select which sprite to show;*/ background-repeat: no-repeat; width: 60; height: 30px; /*resize border for image;*/ background-size: 100px 50px; /*resize image (best not to resize);*/ } #img2{ position: absolute; width: 25px; height: 25px; /*resize border for image;*/ left: 50px; top: 50px; background: url("testCSS.png") -0px -25px; background-size: 100px 50px; /*resize image (best not to resize);*/ } #img3{ position: absolute; width: 25px; height: 25px; left: 100px; top: 100px; background-image: url("testCSS.png") ; background-size: 100px 50px; background-position: 75px 25px; } .square{ position: absolute; width: 30px; height: 30px; ; left: 150px; top: 150px; Background-color: #FF0000; } </style> </head> <body> <img id="img1" src="test.png" > hi1</img> <img id="img2" src="test.png" > hi2</img> <img id="img3" src="test.png" > hi3</img> <div class="square">box</div> </body> </html>
I have a real problem to resolve, that's why I have to learn this CSS ?language?helper?
I have 1350 images to load into a single plain html page. The images, i made them as small as I could 150x120; barely to distinguish the message. And is taking 20 seconds until the page is finished loading. At higher resolution per image, higher load time!
I want the page to load close to instant.
It's not for a public website, its a local file only for me.
And I google-find that there are some ways to shorten load time.
The best one that suit my case are the sprites. I read about them all day. And this code is my practice on this thing. But I am worried about it. Probably i am so new to this thing.
This code here; every img# instance i have here, is loading !A NEW! png image?
If it does, it is loading a ton of images and it beats the purpose of using sprites.
I want to load one time the sprite image(in a string variable) and reference it in CSS code.
Again, i am new to this thing. Please make some sense for me.
Thank you!
#img1{ background: url("testCSS.png") 0px 0px; } #img2{ background: url("testCSS.png") -0px -25px; } #img3{ background-image: url("testCSS.png") ; }
