Join Brian Wood for an in-depth discussion in this video Simple CSS background image swap, part of Making Your Site Retina-Ready.
- An easy method that we use for HiDPI images…is for swapping background images in CSS.…In order to optimize for HiDPI and non-HiDPI screens,…we create several images usually.…For instance, this div right here will have multiple images,…one at regular and one at HiDPI.…We can then use a media query…to automatically swap out the image…depending on the device…and some features of that device.…In this video we'll insert an image…into a container, into a div via background CSS,…and then we'll swap it with a media query.…
This can be another method for adding to our HiDPI toolkit.…I've got the site open here.…What I'm gonna do is I'm gonna open up our--…Actually I'm gonna inspect this element.…I'll right click and Inspect it.…A lot of browsers allow you to do this.…It gets me to the developer tools.…If I scroll down a bit you'll see that…this is actually just a div,…and if I look on the right,…it's just a div with a background image.…But what I love about some of these tools,…these developer tools, is back in Chrome,…
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 56m Intermediate
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 47s Beginner
Design the Web: Using Symbols in SVGwith Chris Converse20m 31s Beginner
Photoshop and Illustrator: Creating Retina Graphicswith Justin Seeley1h 11m Intermediate
1. Introducing HiDPI or Retina
What is HiDPI (retina)?9m 16s
2. Icon Fonts
5. HiDPI Images
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.