Backgrounds: Color and Images5:47 with Guil Hernandez
Every HTML element has a background layer that is transparent by default. In this video, you'll learn basic background properties for applying colors and images.
Sets one or several background images for an element.
Sets the size of a background image.
Controls whether or not the image is tiled and how it gets tiled both vertically and horizontally. The value
repeat-y repeats the image vertically, while
repeat-x repeats the background image horizontally.
In an HTML element, 0:00 everything except the margin area is considered the background layer. 0:02 And every element has a background layer that is transparent by default. 0:05 We can fill that layer with a color or an image. 0:09 So, let's take a look at some of the basic CSS background properties for 0:12 applying colors and images. 0:17 Then we'll see how certain properties effect how the background of 0:19 an element is positioned and sized. 0:22 Now so far throughout this course, we've used the background color property to set 0:25 the background color of our main header in the Wildlife container. 0:30 So we already know how that works. 0:35 What we're gonna next is, we're gonna give our main header element 0:37 a background image, and we can do that with the background image property. 0:41 So let's go back to our main header rule right here under the comment section for 0:46 Main Styles. 0:51 And right beneath the height property, let's add a background image property. 0:52 Background image values are defined as a URL value, 1:00 which uses the URL function to tell the browser where to find the image. 1:04 So as the background image value, 1:09 let's type url, followed by a set of parentheses. 1:11 Now, inside the parentheses is where we write the path to the image we want 1:15 to display. 1:20 Now the URL can optionally be enclosed with either single or 1:21 double quotes, so let's go ahead and use single quotes. 1:26 Now, we'll want to display the mountains that JPEG image 1:29 located right here in our image directory. 1:34 So, if we go back to our background image value and specify the path to the image 1:38 by typing image followed by forward slash, then the name of the image, 1:43 which is mountains.jpg, when we save our stylesheet and refresh the page, 1:48 we don't see the background image just yet in our main header. 1:56 Well whenever a background image doesn't display on a webpage like this, 2:00 it usually has to do with the file path that references the image. 2:04 When specifying a relative path to an image, 2:09 if our stylesheet is in a separate folder, so in our case it's in the CSS folder. 2:13 We'll need to tell the browser to move outside the CSS directory, 2:18 then move inside the image directory. 2:22 And we can do that by adding two dots and 2:26 a forward slash right before the image directory name. 2:29 So this tells a browser to move one directory backwards, 2:34 then start searching for the image in the image directory. 2:37 So now when we save our stylesheet and refresh the browser. 2:40 Now we're able to see the mountains image as a background of our main header. 2:45 Cool. 2:51 Now by default, a background image is repeated or 2:53 tiled both horizontally and vertically, so that it covers the entire element. 2:56 Now since our image is pretty large in size, we're not really seeing it repeat. 3:01 But we're also able to set the size of 3:07 our background images using the background size property. 3:09 And we can set the background size using any length values or percentages. 3:13 So let's go back to our main header rule, and right beneath the background image 3:18 property, let's add a background size property. 3:22 And let's set the background size to 40%. 3:29 So when we use percentages as the background size value, 3:32 keep in mind that percentage values are relative to the width and height of 3:36 the background area of the element, not the width and height of the actual image. 3:40 So, we're gonna save our stylesheet, and go back to our browser preview, and 3:46 let's take a look at what happens when we refresh the page. 3:52 So, when we do that, notice how the background image is now 3:55 40% the size of the entire background area, and 3:59 we're seeing several of them, because it's actually repeating or tiling by default. 4:03 But, we can control whether or not an image is tiled, and exactly how it gets 4:10 tiled, both vertically and horizontally, with the background-repeat property. 4:15 So, let's go back to our main header rule, and 4:20 let's add a background-repeat property. 4:24 Now, the default value for background-repeat is repeat, 4:28 which as we can see repeats the image vertically and horizontally so 4:33 that it covers the entire background image painting area. 4:38 Now if we only want the image to repeat horizontally, 4:42 we can use the value repeat-x, which, as we can see when we 4:45 refresh the page it repeats the image horizontally on what's called the x-axis. 4:51 And if we go back and change the value to repeat-y, 4:57 the image now repeats vertically on the y-axis. 5:01 Now if we don't want our background images to repeat, we'll need to 5:07 use the value no-repeat, and that's what we're going to use in our case. 5:11 So when we save it and refresh the page, as we can see that no-repeat value 5:16 places the image in the top left corner, and it does not repeat in any direction. 5:22 Finally, it's usually good practice to set a background color 5:28 to preserve the contrast between the background and the content. 5:32 Just in case the image is not available, or 5:36 the user has disabled images in the browser. 5:38 So, for now, let's keep the orange hexa decimal value as our background color. 5:41
You need to sign up for Treehouse in order to download course files.Sign up