In this exercise, practice using background and z-index styles.
- [Instructor] In this project exercise, we'll be adding a background image to the education section. There's a lot of white space here so it could use a little decoration. The first thing I'll do is add the image file. There are three to choose from in the starter files found in the chapter one 0-1-0-4 folder. Of course, you can use your own as well. Though we can use CSS to make adjustments, I would suggest using an image that has a plain background where the text will be. Sometimes, a blurry image can work as well. Normally, I rename my image files to something more descriptive. But I downloaded these from a stock photography site, unspash.com The file names are named after the photographer, so you can do a search for them on the site if you'd like. I'm going to use this image here with the pencils and copy it to my image folder. Now let's go to our CSS file. We'll be adding this image to the entire section. So this style will be added to the education selector. I generally like to use shorthand properties, but for this I think it'll be more straightforward to start with the longhand properties. It can always be updated later. So the first thing we'll do is add the background image. The property is background dash image and we'll use this url function value. For the file path, let's take a look at the file location. Our starting point is the CSS file which is currently contained within a CSS folder. So that means we need to start with a dot dot forward slash to move this file path up and out of the CSS folder and then we need to navigate into the images folder. We'll add another forward slash to add the image file name. So I'm just going to copy it here to make sure I get the exact file name and paste it into my url. So let's save the file and check to see if it loaded into the webpage. Right now, this particular image is big enough to fill the area, but I'm still going to add a background size of cover just to make sure the area is always covered. Back in our CSS file, we'll add a background dash size value of cover and save it. Refresh. As you can see, it changed the position of the image as well. So even though I can see the pencils within the container, I'm still going to add some background position to it to make sure that the pencils are always displayed no matter the size of the viewport. So let's go back to our CSS file and add in the background position. And we'll set the value to top and right. Okay, let's save the file and check the changes again. Well in this view, it doesn't look like it changed the position too much, but when I resize the browser we'll see that the pencils always stay at the top right of its container. At the smaller size, a bit of the text goes over the pencil. Before we adjust that, let's add some padding to the bottom of this section just to add some height to the area and allow more of the image to show. Go back to our CSS file and just a little bit at the bottom, 100 pixels should do it. Let's see the changes. So now when I resize it, we still have some text falling over the image and depending on what image you use, sometimes changing the font color might work or even a background color to the text itself. For this particular layout, I'm just going to set a width to the paragraphs so it doesn't span all the way across. 60% should do it. I'm going to create a new selector so I can select only the paragraphs and add a width of 60%. Now let's check our change one more time. Refresh. Much better. At the smaller size, there's not much we can do about this. Except maybe just change or remove the image altogether. But that's what we'll use media queries for. This is the nature of creating flexible layouts. Not everything will be 100% perfect, but you want to make sure it's at least functional and content is not obstructed. Okay, we've done what we can to make the page flexible. It's time to add some media queries and finally make it responsive.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts