Become a member
to unlock all features

    Add Backgrounds to HTML Elements

    Tyler ClarkTyler Clark

    Backgrounds are very flexible. We can use images, gradients, or plain colors to create colorful backgrounds. Let’s walk through styling some backgrounds and learn how we can use shorthand properties to not only define the backgrounds but to position them as we see fit.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 Let's go ahead and give some style to our content block here. I've added a class of content to this section. Video content background URL image slash fog. I'll save that and refresh. We'll see that we get an image placed behind our content.

    00:17 When we use background, it's important to understand it's a shorthand property, which means it applies a whole bunch of styles with a single declaration.

    00:25 With our DevTools, we'll see that it's applying background image and a whole bunch of initial styles with this shorthand property. Let's play around with this for a little bit and do a background size equals cover.

    00:35 When we save and refresh, this is going to scale the image as much as possible without actually stretching it. Inside of our DevTools, we'll see this background size cover and the shorthand is taking that into effect, giving it a cover for the background size.

    00:49 We can go one step further and remove this and do center slash cover, now repeat. When we save and refresh, our image is going to position a little bit differently. When we open up our applied styles, we'll see that the position is centered. The background size is cover and our repeats both say no repeat. We're able to apply a bunch of styles without actually naming each one of them.

    01:13 This background property also accepts gradients, so we can do a radio gradient of crimson and sky blue as the background. We'll save and refresh. We'll see that this is applied to our content background and it's applied as an image.

    01:29 We can give this gradient a parallax field, meaning when we scroll up and down, the red center will follow our view by adding a shorthand property of fixed here.

    01:38 When we save and refresh, we'll see that a background attachment is applied here, a fixed. When we scroll up and down now, the red dot gradient is going to follow our mouse up and down.

    01:53 In conclusion, implementing backgrounds on elements is very flexible. We can use images, gradients, and we can just use plain old colors like red.