0

Looking to reduce http requests & have noticed that instead of using 6 images in a certain area of the website I could probably use a css sprite.

current code from the magento cms homepage

    </div>
<div class="col-md-9" style="padding:0 10px;">
    <div class="single-images">
        <div class="row" style="margin-left:-10px;margin-right:-10px;">
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/brochure-and-booklet-printing.html"><img style="width: 100%;" title="Brochure Printing" src="{{media url="wysiwyg/porto/homepage/content/06/brochure-printing.jpg"}}" alt="Brochure &amp; Booklet Printing" width="269" height="199" /></a>
            </div>
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/business-card-printing.html"><img style="width: 100%;" title="Business Card Printing" src="{{media url="wysiwyg/porto/homepage/content/06/business-card-printing.jpg"}}" alt="Business Card Printing" width="269" height="199" /></a>
            </div>
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/folded-leaflet-printing.html"><img style="width: 100%;" title="Leaflet Printing" src="{{media url="wysiwyg/porto/homepage/content/06/folded-leaflet-printing.jpg"}}" alt="Folded Leaflet Printing" width="269" height="199" /></a>
            </div>
        </div><br>
           <div class="row" style="margin-left:-10px;margin-right:-10px;">
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/flyer-printing.html"><img style="width: 100%;" title="Flyer Printing" src="{{media url="wysiwyg/porto/homepage/content/06/flyer-printing.jpg"}}" alt="Flyer Printing" width="269" height="199" /></a>
            </div>
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/tickets.html"><img style="width: 100%;" title="Ticket Printing" src="{{media url="wysiwyg/porto/homepage/content/06/ticket-printing.jpg"}}" alt="Ticket Printing" width="269" height="199" /></a>
            </div>
            <div class="col-sm-4" style="padding-left:10px;padding-right:10px;">
                <a class="image-link border-radius" href="http://www.example.co.uk/business-stationary-printing.html"><img style="width: 100%;" title="Business Stationary Printing" src="{{media url="wysiwyg/porto/homepage/content/06/business-stationary-printing.jpg"}}" alt="Business Stationary Printing" width="269" height="199" /></a>
            </div>
        </div>
    </div>

This displays as

enter image description here

I have created a css sprite using a sprite generator website but i'm baffled about where to put the code that came with it which is as follows -

.sprite { background: url('sprite.png') no-repeat top left; width: 220px; height: 199px;  } 
.sprite.Brochures { background-position: 0 0; } 
.sprite.Business-Cards { background-position: 0 -201px; } 
.sprite.Flyers { background-position: 0 -402px; } 
.sprite.Leaflets { background-position: 0 -603px; } 
.sprite.Letterheads { background-position: 0 -804px; } 
.sprite.Tickets { background-position: 0 -1005px; } 

plus this code

<div class='sprite Brochures'></div>
<div class='sprite Business-Cards'></div>
<div class='sprite Flyers'></div>
<div class='sprite Leaflets'></div>
<div class='sprite Letterheads'></div>
<div class='sprite Tickets'></div>

Can someone explain to me how i can get the area shown in the image to look the same but use 1 css sprite instead of 6 images?

migrated from magento.meta.stackexchange.com Aug 11 '15 at 4:39

This question came from our discussion, support, and feature requests site for users of the Magento e-Commerce platform.

1

You're right. You can use one image as sprites source. The method is described well here and here. This method will work well only for static pages. Generating dynamic sprite images each time you load a page will increase usage of your server's resources so I advice to cache them somehow.

If you need more help in case of exact code prepare your own jsfiddle example.

  • Welcome to Magento.SE! Links have a bad habit of dying off after some time. Please credit the source and copy the relevant section into the answer to help those who find this some time in the future. Thanks! – philwinkle Sep 3 '15 at 22:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.