- [Chris] Hi, this is Chris Converse, and in this episode,
we'll be exploring some background properties in CSS.
Now there are quite a few CSS properties that we can
assign to the background of an HTML element.
In addition to solid colors and gradients,
we can also add images, and even control how those images
fill the available space.
By using repeat properties or scaling options,
we can proportionally resize an image
to either fit within the available space
or scale the image large enough to fill the entire element.
Even if some of the image gets cropped as a result.
These properties will provide you with a wide range
of design options for your webpage.
Now if you'd like to follow along,
download the exercise files,
and I'll start by opening the index.html file
in a text editor.
Now to preview this, you can open the index.html file
up in a browser.
My particular text editor has a built-in preview,
so I'll use that, and all we have here is a simple
div element defined over here, with an ID of container
and then just a simple paragraph element inside of here.
And now to begin styling the background element of the div,
with an ID of container, let's go back to the exercise files
and let's open up style.css.
And so with the CSS file opened, let's come down here
and let's find the rule that targets the pound sign,
which is an ID, container.
Again, that's this outer box here, that's got a slight
gray border defined right here.
Let's come in here and add a few returns,
and let's first start by simply changing
the background color.
So we'll type background-color, we'll use hexadecimal
and let's specify 0D for red, 8B for green and CD for blue.
Now over here in the preview, we can see that the entire
background area of that div with an ID of container
is now showing up in that color blue.
It's also worth noting that that blue
is behind the paragraph element as well.
It is all the way in the background of that div element.
Now with a solid color defined, let's take a look at
creating a gradient.
So back in the CSS, let's come in here and change
background-color to just simply background.
Next, let's get rid of the color and what we're going to do
is we're going to type linear-gradient,
then we'll put a beginning and ending parenthesis,
keep the semicolon that we had from before.
And now, inside of the parentheses, we'll specify
two colors.
First we'll pick a green color and then a blue color.
So for the first green color, type pound sign.
We'll set red to 68,
we'll set green to C8
and we'll set blue to 7A.
Then we'll hit a comma and specify the blue color.
So pound sign, 0D for red, 8B for green and CD for blue.
And now over here in the preview, we can see we now
have a gradient.
By default the gradient starts at the 0,0 corner,
which is the top left area here, and it goes all the way
down to the full height of the y-axis.
Now we can change the direction of a gradient as well.
So let's come in here, inside of the parentheses
for linear gradient.
Let's hit a comma, at the beginning before the first color
and then before the comma, we'll type
to space bottom space right.
And now what we'll see in the preview is the color starts
from the upper left-hand corner and goes all the way
to the bottom right corner.
So let's take a look at a couple more properties we can set
for our gradient.
So first, after the second color blue,
let's hit a space, we'll type in 10%, and what we'll see
in the preview is that the blue starts at 10% of the way
from the top left to bottom right.
And now before linear-gradient, let's come in here
and type in the word repeating and then add a dash
and this will actually repeat the gradient
all the way across the entire element.
Then finally we'll come in here and replace
repeating-linear with radial.
Let's come in and remove the to bottom right and the comma
and then let's come in here and change the 10% to 70%.
So now on the preview we can see we now have
a radial gradient between our two colors.
Now as you can imagine, defining CSS gradients can get
rather complex, rather quickly.
Now there are many online tools that you can find
that will help you to define your CSS gradients
with a visual editor, right in the browser,
and then you can simply copy and paste out
your CSS properties.
And these are two of the most popular editors
at the time of this recording.
And so now that we have explored colors and gradients,
let's come in here and start experimenting
with background images.
So let's delete that background property.
So the first property we'll start with is a
background-repeat.
This will control how the image displays
inside of the element.
And so to begin, we're just going to simply set this
to a no-repeat.
Next line we're going to set background-image,
then we'll type in url, put in our parentheses
and a semicolon.
Inside of the parentheses we can point to an image.
So I'll point to one of the graphics we have
inside of the media folder,
so we'll type media/clovers.jpg.
Now as soon as I do that, we'll see that the graphic
now shows up in that background element.
It aligns to the upper left-hand corner and since in this
particular view, based on the width of the browser,
the image is not as wide as the background element,
so we'll see that negative space here.
Next property we're going to set, this can be
background-position.
So the first property after position is going to be
the X property.
So let's set this to 50%.
Then a space, and for the Y value we're going to set 50%
as well, so that will put the image right in the middle
of that HTML element.
So again, if I come over here and resize the browser,
we'll see that that will position, both on the horizontal
and vertical axis, inside that area.
Let's add another property.
Let's add background-size.
This allows us to scale the size of this image.
Now we will set this to tile, but I want the individual
tiles to be a lot smaller.
Now the original image of the clovers,
is 500 pixels by 246, so I want to use a much smaller value.
So the first value is the X size.
We'll set this to 350 pixels and then we'll set the Y size
to 172 pixels.
So again, that makes that much smaller.
And now to see this tile the entire area, let's come up
and change background-repeat to repeat,
and so now we have this seamlessly tiling background,
filling the entire area.
So at this point let's come in here
and let's change the clovers file to louvre.
So louvre.jpg.
Let's come back up to the repeat and let's set this back to
no-repeat.
Next, let's change the background-position.
We'll keep 50% on the X, so it centers,
but for the Y position, let's set this to bottom.
And this will set the bottom of the jpeg file
to align to the bottom of the HTML element.
And then for background-size, let's take a look
at two different properties.
Now if we set these values to a percentage,
the sizing wouldn't be based on the percent of the graphic,
but the percentage value would be calculated based on
the size of the HTML element.
But what we going to do here is set some dynamic
proportional scaling.
So first we're going to use contain.
So for background-size we'll choose contain,
and what this will do is scale the background image
until either the height of the image
matches the height of the element
or the width of the image
matches the width of the element.
But in either case, the image will scale
as large as possible without being cropped
and leave additional space, either horizontally
or vertically, depending on how much room is available
in the element.
And then finally, let's come in here and change contain
to cover.
So what cover is going to do is scale the image,
horizontally or vertically, so that the image will fill
the entire HTML element, and this can result
in your image being cropped, as its scaled
to fill the entire element.
So at this point, I have the image placed in the background
the way I like it.
One final detail, let's come down to the container space p,
we're going to target the paragraph element,
which is the caption here.
And let's change some styles here.
Let's make the color white and let's set
the background-color of the paragraph element
to a semi-transparent black.
So to set the type color, we'll type color,
pound sign and three F's to make it white.
Then I want to come in here and set background-color.
We use the RGBA colorspace and then inside here,
we'll set zero for red, zero for green, zero for blue,
and then .6 for the alpha setting.
Now one other thing you might be interested in
is to assign a background image to the entire background
of the web page.
And so what we're going to do is we're going to take
our background properties, move them off the container
and add them to the body element.
So to do that in our CSS, let's come in here
and simply select the background-repeat,
image, position, and size.
Let's cut these to the clipboard.
Let's come in here and temporarily set the display type
of the container to none.
Let's come up to body, let's hit a return.
Let's paste all those properties in here.
At the top of the body element, I'm going to come in here
and set a margin of zero.
And now because the body element behaves
a little differently than other elements.
Because the body element and the head element
exist inside of the HTML element for the entire document,
we will need to set the height of the HTML element itself.
So let's come in here and add a rule to target
the HTML element of the entire document,
and let's set a height here to 100%.
The HTML element will not reach a hundred percent
of the height of the browser window
unless we have enough content.
Now with those few changes, we have a background graphic
that will now fill the entire viewport area
inside the browser.
And with that we've explored quite a few options
for working with backgrounds.
Now if you'd like to learn to create
your own seamlessly tiling graphics,
check out our course entitled
Creating a Repeating Background in Photoshop,
and if you'd like to build on these background techniques
to create responsive images for your web page,
check out chapter two of our course on
Creating a Responsive Web Design.
Both are available here in the library.
And now that concludes our brief look at
Working with Background Properties in CSS.
And, as always, thanks for watching.