From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding new graphics to the project

Adding new graphics to the project - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Adding new graphics to the project

“

- [Voiceover] So now let's go back to the exercise files and let's add those high-res graphics into our project. So over in the exercise files I'm going to open the high-res graphics folder. We can see that every one of the files here has an underscore and then an @ symbol and then either 2X or 3X. Let's come in here and select all of these individual files. Now you can either copy and paste these or option drag, and let's copy all of these into the Images directory of our final project. And I'll open up the Images directory now and I can see, for example, the banner 425. Here's the original graphic. Here's the 2X size and the 3X size. Now the way that I created these graphics, was I scaled each of the graphics to two and three times their original sizes, which were used in the original project. In the case of the banner graphic, the 1X size matches the CSS size in pixels, 1,200 x 430 pixels. The 2X size doubles the width and the height across the image dimensions, allowing the device…

Contents