- [Voiceover] It's hard to overstate just how important
the background property is to web design.
This one simple property allows us
to add visual sophistication and style
to even the most basic content.
Take this sample webpage.
Here it is with just the browser's default styles displayed.
Now if I turn on its CSS, you can see
the very dramatic difference:
same content, just worlds apart
in terms of look and feel.
Now of course, there's more going on here
than just the background property,
but all the images, accents, and defined regions
are made possible by using backgrounds.
The background property and its related syntax
can get fairly complex, certainly too complex
to cover in a five minute movie.
So instead of delving too deep into the syntax itself,
I want to talk a little bit about what
the background property can do
and why it's so important for you
as a designer to focus on learning all you can
about how backgrounds work.
First, let's focus on exactly how the background
of an element is defined.
You'll often hear the background property
referred to in discussions of the box model,
even though it's not actually
a part of the box model itself.
That's because the area for the background
extends all the way to an element's edge.
If you were to define a solid color
for an element's background,
it would extend not only to the edges
of the element's content width and height
but to the edges of the padding for that element as well.
As the name suggests, backgrounds display
behind an element's content,
allowing you to create sophisticated visual effects
from a single element.
The default style for most elements
is to have a transparent background,
meaning you can see through them.
By explicitly setting the background property,
you can choose to display solid colors,
gradients, or even images behind an element's content.
With that in mind, let's take a look
at what types of things you can display
in an element's background
and some of the techniques that designers use
when employing them.
The first and most basic usage
of the background is to simply display a solid color.
This can allow you to transform an invisible div,
section, a side, or article into a visually defined space
or give individual paragraphs or headings
added definition.
In addition to solid colors, we can also now use
gradient fills as backgrounds as well.
These are relatively recent,
and cross browser syntax can be tricky.
However, they're a powerful addition
to the background property.
Designers have even gone as far
as using gradients to create patterns
and other cool visual tricks.
The background property also allows you
to specify an image instead of a solid color
or gradient.
This opens up a tremendous amount
of possibilities for the visual designer,
and indeed was one of my most
transformative moments in learning CSS.
Once I learned what was possible
with background images, my designs
and approach to web design changed dramatically.
When specifying a background image,
you can control its position,
whether it repeats and along which axis
it repeats on, the background image's size,
and whether or not the background image
should be clipped inside the background area.
I should point out as well
that it's entirely possible for an element
to have both a background color
and a background image.
Background colors are layered
underneath background images
and allow you to combine the two
for powerful visual effects.
In fact, we now have the ability
to use multiple background images
for a single element.
This feature gives designers even more options
when creating complex visual designs.
So, how are backgrounds typically used
in web designs?
Well, as I mentioned before,
solid background colors allow you
to add visual definition to elements
and to help draw attention
to important sections of content.
Going back to the design that I showed you earlier,
I want you to take a look at the headings
for the secondary sections on this page.
Now for search engines and accessibility's sake,
I really need the text to remain.
But visually, I wanted to display the text
in a way that CSS won't let me do stylistically.
So in this case, and let me go ahead
and turn the styles back on here,
in this case I used CSS to move the text
off of the page visually and then use
a background image to display in its place.
So screen readers, search engines, or other bots
will still see the headings
while people that are looking
at the visual design see the headings
the way that I wanted them to display.
Now on the same page, I'm using background images
to display icons, custom paragraph rules,
and even the company logo
without sacrificing accessibility
or adding unnecessary image tags to the content.
As you can imagine, there's a lot more
to the background property
than what we've covered here.
I just want you to understand how important
the background property is to visual design
and encourage you to make sure
that the background property
is one that you put specific emphasis on
as you learn CSS.