Use CSS Sprites to make your logo responsive

Use CSS Sprites to make your logo responsive

Remember CSS sprites? They’re a group of different graphics combined into one file, and we’ll be using them to create a responsive logo.

It’s a technique used to optimize browser performance because it requires only one image to be downloaded from the server. It’s just a matter of specifying which specific smaller piece of the larger image will show.

As designers, we know that a great experience is the most important consideration, no matter what devices your users happen to be using. Branding is an essential part of a company’s identity, so showing the perfect logo variation for your user’s device combines user experience with brand recognition. Really impress your users by not overlooking this important logo detail!

Using SVGs for image sprites

Let’s look at image sprites in action. See how there’s a “stack” of images in a row in the image here? Only one shows at a time by specifying which part of the “large image” we should show for the illusion of the single image.

The image grouping can be in any order: horizontal, vertical, or a combination of the two. For ease of demonstration purposes, my example is in vertical order. The image was saved as an SVG file.

logo-layout

Although other formats will also work, SVGs are a great choice because:

  • They scale to any size.
  • They look great on retina devices.
  • There’s no loss of clarity.
  • They’re often a smaller file size.
  • They can be easily styled with CSS.

I used Adobe Illustrator to create this graphic. By carefully measuring, it was best to set up the file with a grid in increments of 300px. The logos are evenly placed to be in the middle of the grid lines. This isn’t entirely necessary but worked well in this example. As you read below, you’ll see that the starting measurement is an image that’s 300x300px.

The sprite file that contains the grouping of images will be our background image. The large horizontal logo with the Flywheel text and wheel will be used for desktop screens, the vertical logo layout will be used for tablets, and the small example that only shows the wheel for the Flywheel logo will be used for mobile devices. Remember, you can have more media queries and more logo options than what I include here.

device-options

Determining styles for the logo options

Let’s create classes with media queries for the three different logo options. You may notice a different width in the larger screen sizes — this is to account for a larger graphic.

Remember: You should never make changes on a live site. Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

First, let’s create the space for the logo with the smaller screen in mind. It will fill a space of 300x300px. We’re using the SVG file with all of the logo options as the background image.

.logo {
  width: 300px;
  height: 300px;
  background-image: url("_img/flywheel-logo-stack.svg");
  background-position: center top;
  padding:0px;
  margin: 0 auto;
}

@media only screen and (min-width: 20em) {
  .logo {
      background-position: center 300px;

  }
}
 /* 328px */

@media only screen and (min-width: 48em){
  .logo {
    background-position: left -300px;
    width: 600px;
    height: 300px;
  }
}
/* 768px */

@media only screen and (min-width: 56.25em){
  .logo {
    background-position: left 0px;
    width: 600px;
    height: 300px;
  }
 }
 /* 900px */

The object here is to show the correct logo by determining the background position, which varies depending on the media query that’s called. Notice that the coordinates are carefully chosen to give the best result.

The default background position listed is the horizontal position, and the second value is the vertical position. The tablet size is set to have the horizontal position as left with a vertical position of -300px. With these specific coordinates, the middle logo in the background SVG graphic is the one shown. This same idea is used for the other logos as well.

All in all, CSS sprites are a quick and effective way to create a user-friendly experience Tweet on a variety of devices. With a little experimentation and careful positioning, you can create a custom, responsive logo for your website.

3 Comments

  • ADMIN
    Bryan says:

    This is a good use of svg & few server calls for the logo image, but the use of background images is not a good idea as it won’t be visible on the print stylesheet, screen readers can’t see them and won’t know they exist and users that have High Visibility Mode on can’t see it either.

    I’d use this technique on more ornamental elements and not on pertinent items like the logo.

  • Todd Temple says:

    I tried to share this page (https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/) using the Tweet button in the left sidebar and it didn’t seem to work properly. I went ahead and shared manually, but I thought I would share this with you in case it is a bug/error. Hope this helps and kudos on the awesome articles!

Join the discussion

Get more great content in your inbox

More articles

Delightful managed WordPress hosting

The #1 choice of over 70,000 digital creatives

Tour the platform
[if lte IE 8]
[if lte IE 8]