CODEWITHSUNDEEP
javascriptcsshtml
Ryan Leach
Ryan Leach

Reputation: 4470

image sprites as background on webpage

Is there a way to optimize page loading times of a sprite/texture based background on a website?

Basically the look I'm trying to go for, is a 2d representation of Minecraft, with everything above the grassline to be a header, and bedrock as the footer.

Similar to www.projectminecraft.com and www.dokucraft.co.uk

But I'm worried about page load times, yet want to have caves and other details.

Upvotes: 0

Views: 93

Answers (2)

Joel Worsham
Joel Worsham

Reputation: 1150

To use a sprite-sheet, create one large png (or jpg if you'd like and there's no transparency) that has all of your images on it. (example)

Next, for each element you want to have an image, set the background to something like:

background:url(my-sprite-sheet.png) 10px 40px no-repeat;

In this example, the coordinates relate to your sprite sheet. It tells the background to have the upper-left corner of the background begin at 10px from the right of your image and 40px from the bottom. (strangely enough, 0 0 would be the upper-left corner of your image)

As far as I know, you can't do this for repeated (tiled) backgrounds. For that, have each "tile" as it's own image and use something like background:url(my-background.png);. By default, the image will repeat on both the x and y axis. You can further define the repeat with repeat-x repeat-y and no-repeat.

Hope this helps!

Upvotes: 1

Wil
Wil

Reputation: 5057

For a large background of repeated content you'd want to create an image that tiles in it's smallest form, then use background-repeat: repeat in your CSS.

If it's not possible to tile the entire thing, then try and tile as much as possible (the edges and bottom are usually a good place). Don't forget you can use multiple background images in modern browsers (see their adoption in browsers on caniuse.com).

The second example you listed does however uses one large png, and in this case, you should ensure you're only using the minimum colours you require and compress the image as far as you can with something like http://imageoptim.com/.

Upvotes: 1

Related Questions