Backgrounds: Color and Images

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