0

Afternoon, and hope you all had a wonderful Xmas.

With the goal of reducing HTTP requests as possible I want to make a sprite with all patterns used for backgrounds. I already made 2 sprites for the site, but all use specific sizes for height and/or width

Is it possible to use sprites where the background repeats both X and Y and/or use width=100% ?

I have these files:

blog.png (65px*65px)
contacts.png (67px*100px)
intro.png (50px*50px)
portfolio.png (80px*80px)

And for each I have CSS like this:

#intro{width:100%;background:url(../img/pat/intro.png) repeat}
#portfolio{width:100%;background:url(../img/pat/portfolio.png) repeat;padding-bottom:30px}
#contact{background:url(../img/pat/contacto.png) repeat;padding-bottom:50px}
Afonso Gomes
  • 902
  • 1
  • 14
  • 40

4 Answers4

2

Sprites and repeats don't really combine. There is a trick with -moz-image-rect but it seems to be Gecko-only.

You can, of course, put multiple Y-repeating images together side by side, or multiple X-repeating images above each other; but if you want to repeat in both X and Y directions, it has to be a single image.

Community
  • 1
  • 1
Thomas
  • 174,939
  • 50
  • 355
  • 478
  • :( Would be cool tho if it was possible ... instead of having 6 background images I would have only 1 ... less 5 HTTP requests in a total of 37 is a lot! – Afonso Gomes Dec 26 '12 at 16:24
  • 1
    They are deliciously cacheable though, so it'd be only on the first page view. The remaining 32 are still more ;) – Thomas Dec 26 '12 at 16:25
  • Wanna give some help with that? :P My site is at afonsogomes.com ... 100/100 Performance grade on Pingdom Tools, 98% on Google Pagespeed and 96% on YSlow ;) I'll accept any advice you can give! – Afonso Gomes Dec 26 '12 at 16:35
  • 1
    Well, a comment thread is perhaps not the right platform, and it loads pretty quickly for me already. With all those photos and logos, there's bound to be a bunch of requests, and I don't think spriting them would help much. The main thing I'd change is make the photos into JPGs rather than palettized PNGs; e.g. you can see the banding here: http://afonsogomes.com/img/conteudos/fotografia/Moliceiro-mini.png JPG is generally better at compressing photographs. – Thomas Dec 26 '12 at 16:43
  • At JPG quality 70 (out of 100), which is usually good enough for thumbnails, I get that image down from 24kB to 6.2kB. – Thomas Dec 26 '12 at 16:46
  • Heck!! I changed those from JPG to PNG so I could run them by tinypng and gain something there... forgot I could reduce the quality of JPGs ! :D I know comments is not the best way of getting feedback ... but I thought I could take my chances with you and indeed you helped! Thanks for your valuable input mate! Cheers! – Afonso Gomes Dec 26 '12 at 16:52
1

I don't think it's possible to do it like this.

Klevis Miho
  • 851
  • 8
  • 15
1

CSS2 sprites are difficult to apply because you are limited to using sprites for non-repeating patterns that has specify width/heights. For isntance, I would use a css sprite for an image rollover with a fixed width/height and then simply call background-position: 0 -10px; if the image was 10px tall and the css sprite for created through vertically stacking the images.

CSS3 gives you greater control by allowing you to do background-crop or other innovative ways. I would do a google search to learn more.

If it were up to me, I would not spend so much time for such a small cost saving tactic. HTTP calls and bandwidth are cheaper and less costly than ever before. Your time is better spent on compressing html, decreasing bottlenecks with the backend, and utilizing cache o save images.

ProfileTwist
  • 1,524
  • 1
  • 13
  • 18
0

There are 4 types of CSS background images according to the way they repeat and 3 of them can be combined in CSS sprites, 3 different sprites alas (still more performant than 30 images).

  • no-repeat backgrounds in 1 sprite,
  • repeat-x backgrounds in a second sprite,
  • repeat-y backgrounds in a third sprite,
  • repeating backgrounds must stay as is

You've background of different sizes, say for repeat-x background, widths of 32, 33, 50 and 80px. The advice I was given was to choose the largest one and make a sprite with stripes of this size (80px here). Then you only have to apply background-position of 0, -80px, -160px, etc whatever the exact widths of each individual image. If you replace a 32px image by one of 33px, you won't have to replace all the background-position of following images and carefully translating by 1px all the layers in Photoshop!
If all your widths are 33px max except one at 80px, you can choose to make stripes of 40px by security and put the 80px one at the end, making it a particular case.

Unrelated to sprites, you can also read about new background-* properties (as background-size: cover):

FelipeAls
  • 21,711
  • 8
  • 54
  • 74