From the course: CSS Shorts

Unlock this course with a free trial

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

3D product box: Add graphics to sides

3D product box: Add graphics to sides - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

3D product box: Add graphics to sides

“

- [Chris] Hi I'm Chris Converse, and welcome to part two of this three-part series on creating a 3D product box. In this episode, we'll add a sprite sheet graphic to the sides of our product box. Then position the background graphic to match the artwork to the corresponding sides. And if you were following along with me in part one, we're going to continue working inside of the same exercise files. So back in our text editor, we ended here by creating the top, left and front panels of our box. Now we're gonna add a background graphic into all of these individual divs. So in our CSS file, let's come back to our product space box, space div role, and let's add a background graphic to all of these divs. So after border, let's come in here and add a background property. We're gonna use a background graphic, so we'll take url, put in our parentheses. Inside of the parentheses, we'll type images, forward slash, box underscore design, dot jpg. Then outside of the parentheses, we'll add a…

Contents