Welcome to part-8 of the series. We will start this part with background images.
To use image we need an image. So, go ahead and download any from the internet. After that create an images folder in the root directory of the project and place the image in it.
Now, goto the styles.css and use the property background-image to set the image as background. We have to give the path of the image inside the url().
So, this will show our image in the background. But notice that it is repeating. This generally happens when the image is small in size, as our image which is only 300x168 px.
To fix this we will use the property background-repeat and set it to value none.
This will solve one problem, but create another because the image is only taking the original size.
Now, we will use the property of background-size: cover for the image to cover the whole element.
Now, our image will cover the entire element. Our image is a bit blur, as it was smaller.
So, let’s choose a larger image(1920 x 1200 px) and place it inside the images folder.
Now, we will use this image for background. So, head over to styles.css and use this image. We are also commenting out the background-repeat and the background-size property.
Now, our background image will be shown as below. Again notice that we are not getting the full image.
This means that the two property of background-repeat and the background-size are very much important, even for larger images. So, let’s uncomment them.
So, now the perfect image will be shown inside our box.
We will learn about pseudo classes now. The extends the way we target the classes. So, let go to our index.html and create an unordered list with eight list items.
Now, we will use the pseudo classes of first-child, last-child and nth-child to target the different li.
And it will change the background accordingly. Notice that in nth-child we can give any number.
Let’s goto our index.html and create a new list with a class dynamic-list.
Now, in lot’s of cases the list grows dynamically and we want to target even and odd with different styles. We can pass even and odd in nth-child.
This will turn even and odd with different background colors.
This completes our CSS Crash course. You can find the whole code on this codepen.
The code is also stored in github. The link for the same is here