CODEWITHSUNDEEP
htmlcss
Sasha
Sasha

Reputation: 8705

CSS - using large images as background (performance)

I have question about site performance. I have 4 large images (1920*500px) that need to be show on the home page in some kind of slider - user need to click for the next image to show up, it is not slide show. When home page is loaded, only first image is being seen, and rest are need to be seen only at user request. My question is next. Is it smart to create one large image (sprite) and use this as background (this images have focus on centar, and users which have display that supports this resolution can see the hole image, users that don't have that kind of display will see as much as they can) or to go with standard img tag, or there is some better way to do this?

Upvotes: 0

Views: 393

Answers (3)

Scott Simpson
Scott Simpson

Reputation: 3850

Change the class with jQuery.

.bg-1 { background: url("your image") no-repeat center center fixed; }
.bg-2 { background: url("your image 2") no-repeat center center fixed; }
.bg-3 { background: url("your image 3") no-repeat center center fixed; }

Upvotes: 0

Chris Herbert
Chris Herbert

Reputation: 6285

The advantage of using a sprite is that you are saving HTTP requests and preloading images (which is essential for responsive image rollovers, for instance).

In your case, I don't think sprites make any sense. First, you are only saving three http requests (the first image is presumably visible when you load the page) and you are forcing every visitor to download these large images even if they aren't going to see them.

Upvotes: 3

ArthasNed_StarkGimli
ArthasNed_StarkGimli

Reputation: 42

Im not sure I understand what your asking, but if your always rendering one of the images,then it may be smart to just create a full screen background image like this. You can also change the background image with js when necessary

<style>
html
{ 
  background: url("your image") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity:1;
}
</style>

Upvotes: 0

Related Questions