In an HTML element,

everything except the margin area is considered the background layer.

And every element has a background layer that is transparent by default.

We can fill that layer with a color or an image.

So, let's take a look at some of the basic CSS background properties for

applying colors and images.

Then we'll see how certain properties effect how the background of

an element is positioned and sized.

Now so far throughout this course, we've used the background color property to set

the background color of our main header in the Wildlife container.

So we already know how that works.

What we're gonna next is, we're gonna give our main header element

a background image, and we can do that with the background image property.

So let's go back to our main header rule right here under the comment section for

Main Styles.

And right beneath the height property, let's add a background image property.

Background image values are defined as a URL value,

which uses the URL function to tell the browser where to find the image.

So as the background image value,

let's type url, followed by a set of parentheses.

Now, inside the parentheses is where we write the path to the image we want

to display.

Now the URL can optionally be enclosed with either single or

double quotes, so let's go ahead and use single quotes.

Now, we'll want to display the mountains that JPEG image

located right here in our image directory.

So, if we go back to our background image value and specify the path to the image

by typing image followed by forward slash, then the name of the image,

which is mountains.jpg, when we save our stylesheet and refresh the page,

we don't see the background image just yet in our main header.

Well whenever a background image doesn't display on a webpage like this,

it usually has to do with the file path that references the image.

When specifying a relative path to an image,

if our stylesheet is in a separate folder, so in our case it's in the CSS folder.

We'll need to tell the browser to move outside the CSS directory,

then move inside the image directory.

And we can do that by adding two dots and

a forward slash right before the image directory name.

So this tells a browser to move one directory backwards,

then start searching for the image in the image directory.

So now when we save our stylesheet and refresh the browser.

Now we're able to see the mountains image as a background of our main header.

Cool.

Now by default, a background image is repeated or

tiled both horizontally and vertically, so that it covers the entire element.

Now since our image is pretty large in size, we're not really seeing it repeat.

But we're also able to set the size of

our background images using the background size property.

And we can set the background size using any length values or percentages.

So let's go back to our main header rule, and right beneath the background image

property, let's add a background size property.

And let's set the background size to 40%.

So when we use percentages as the background size value,

keep in mind that percentage values are relative to the width and height of

the background area of the element, not the width and height of the actual image.

So, we're gonna save our stylesheet, and go back to our browser preview, and

let's take a look at what happens when we refresh the page.

So, when we do that, notice how the background image is now

40% the size of the entire background area, and

we're seeing several of them, because it's actually repeating or tiling by default.

But, we can control whether or not an image is tiled, and exactly how it gets

tiled, both vertically and horizontally, with the background-repeat property.

So, let's go back to our main header rule, and

let's add a background-repeat property.

Now, the default value for background-repeat is repeat,

which as we can see repeats the image vertically and horizontally so

that it covers the entire background image painting area.

Now if we only want the image to repeat horizontally,

we can use the value repeat-x, which, as we can see when we

refresh the page it repeats the image horizontally on what's called the x-axis.

And if we go back and change the value to repeat-y,

the image now repeats vertically on the y-axis.

Now if we don't want our background images to repeat, we'll need to

use the value no-repeat, and that's what we're going to use in our case.

So when we save it and refresh the page, as we can see that no-repeat value

places the image in the top left corner, and it does not repeat in any direction.

Finally, it's usually good practice to set a background color

to preserve the contrast between the background and the content.

Just in case the image is not available, or

the user has disabled images in the browser.

So, for now, let's keep the orange hexa decimal value as our background color.