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 sizes for CSS-driven images - CSS Tutorial
From the course: Creating a Responsive Web Design: Advanced Techniques
Adding sizes for CSS-driven images
- [Voiceover] Now in the project so far, we have not added background size properties to the css for the banner graphic and the header. We did, however, add them to the atmosphere graphic, because we used that image in conjunction with text in our layout. So to begin, you can either open up the file inside of starter_files, inside of the css folder, called screen.css, if you want to follow along with a streamlined set of project files. Or, if you're following along from the previous course, you can open up your myWebsite project. For the remainder of this chapter, I'm going to be working from the final project from the previous course. So, in either case, we're going to go into the css folder, and we're going to open up screen.css in your favorite text editor. And now with our css file opened, we're going to be looking for the css rules that target the header element and assign the banner graphic into the background. So down here on line 25, I can see this element here. We have the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
About this lesson1m 46s
-
(Locked)
About the exercise files49s
-
(Locked)
Adding sizes for CSS-driven images3m 12s
-
(Locked)
Adding new graphics to the project1m 24s
-
(Locked)
Using CSS media queries for device pixel ratio5m 55s
-
(Locked)
Using image srcset and the pixel density descriptor3m 53s
-
(Locked)
Where to go from here26s
-
(Locked)