• Locked
No replies
Tue, 2018-11-20 23:59
q12
q12's picture
Offline
newbie
Last seen: 2 years 4 days ago
Timezone: GMT+2
Joined: 2018-11-20
Posts: 1
Points: 2

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

Top
Tags: