1
00:00:00,000 --> 00:00:04,990
It's hard to overstate just how important the background property is to web design.

2
00:00:05,000 --> 00:00:09,990
This one simple property allows us to add visual sophistication and style to

3
00:00:10,000 --> 00:00:11,990
even the most basic content.

4
00:00:12,000 --> 00:00:13,990
Take this sample web page.

5
00:00:14,000 --> 00:00:17,990
Here it is with just the browser's default styles displayed.

6
00:00:18,000 --> 00:00:22,990
Now if I turn on its CSS, you can see the very dramatic difference.

7
00:00:23,000 --> 00:00:26,990
Same content, just worlds apart in terms of look and feel.

8
00:00:27,000 --> 00:00:30,990
Now of course there's more going on here than just the background property,

9
00:00:31,000 --> 00:00:37,990
but all the images, accents, and defined regions are made possible by using backgrounds.

10
00:00:38,000 --> 00:00:42,990
The background property and its related syntax can get fairly complex, certainly

11
00:00:43,000 --> 00:00:47,990
too complex to cover in a five-minute movie. So instead of delving too deep into

12
00:00:48,000 --> 00:00:51,990
the syntax itself, I want to talk a little bit about what the background

13
00:00:52,000 --> 00:00:56,990
property can do and why it's so important for you as a designer to focus on

14
00:00:57,000 --> 00:00:59,990
learning all you can about how backgrounds work.

15
00:01:00,000 --> 00:01:04,990
First, let's focus on exactly how the background of an element is defined.

16
00:01:05,000 --> 00:01:08,990
You'll often hear the background property referred to in discussions of the box

17
00:01:09,000 --> 00:01:12,990
model, even though it's not actually a part of the box model itself.

18
00:01:13,000 --> 00:01:17,990
That's because the area for the background extends all the way to an element's edge.

19
00:01:18,000 --> 00:01:22,990
If you were to define a solid color for an element's background, it would extend

20
00:01:23,000 --> 00:01:26,990
not only to the edges of the element's content width and height, but to the

21
00:01:27,000 --> 00:01:29,990
edges of the padding for the element as well.

22
00:01:30,000 --> 00:01:34,990
As the name suggests, backgrounds display behind an element's content, allowing

23
00:01:35,000 --> 00:01:38,990
you to create sophisticated visual effects from a single element.

24
00:01:39,000 --> 00:01:42,990
The default style for most elements is to have a transparent background, meaning

25
00:01:43,000 --> 00:01:47,990
you can see through them. By explicitly setting the background property,

26
00:01:48,000 --> 00:01:51,990
you can choose to display solid colors, gradients, or even images behind

27
00:01:52,000 --> 00:01:54,990
an element's content.

28
00:01:55,000 --> 00:01:57,990
With that in mind, let's take a look at what types of things you can display

29
00:01:58,000 --> 00:02:02,990
in an element's background and some of the techniques that designers use when employing them.

30
00:02:03,000 --> 00:02:08,990
The first and most basic usage of the background is to simply display a solid color.

31
00:02:09,000 --> 00:02:13,990
This can allow you to transform an invisible div, section, aside, or article

32
00:02:14,000 --> 00:02:19,990
into a visually defined space, or give individual paragraphs or headings added definition.

33
00:02:20,000 --> 00:02:24,990
With the advent of CSS 3.0, we can now define gradients for backgrounds as well.

34
00:02:25,000 --> 00:02:27,990
The support for this feature is still evolving, but it gives us an option

35
00:02:28,000 --> 00:02:31,990
for displaying gradients that uses far less overhead than the previous

36
00:02:32,000 --> 00:02:33,990
method of using images.

37
00:02:34,000 --> 00:02:36,990
And some designers are experimenting with CSS gradients to create patterns and

38
00:02:37,000 --> 00:02:38,990
other cool visual tricks.

39
00:02:39,000 --> 00:02:42,990
The background property also allows you to specify an image instead of a

40
00:02:43,000 --> 00:02:44,990
solid color or gradient.

41
00:02:45,000 --> 00:02:48,990
This opens up a tremendous amount of possibilities for the visual designer and

42
00:02:49,000 --> 00:02:53,990
indeed was one of my most transformative moments in learning CSS.

43
00:02:54,000 --> 00:02:57,990
Once I learned what was possible with background images, my designs and approach

44
00:02:58,000 --> 00:03:00,990
to web design changed dramatically.

45
00:03:01,000 --> 00:03:04,990
When specifying a background image, you can control its position, whether

46
00:03:05,000 --> 00:03:10,990
it repeats, and along which axis it repeats on, the background image's size,

47
00:03:11,000 --> 00:03:15,990
and whether or not the background image should be clipped inside the background area.

48
00:03:16,000 --> 00:03:18,990
I should point out as well that it's entirely possible for an element to have

49
00:03:19,000 --> 00:03:20,990
both a background color and a background image.

50
00:03:21,000 --> 00:03:26,990
Background colors are layered underneath background images and allow you to

51
00:03:27,000 --> 00:03:31,990
combine the two for powerful visual effects; in fact; in CSS 3.0,

52
00:03:32,000 --> 00:03:35,990
the ability to use multiple background images for a single element has been introduced.

53
00:03:36,000 --> 00:03:40,990
This feature gives designers even more options when creating complex visual designs.

54
00:03:41,000 --> 00:03:43,990
So how are backgrounds typically used in web designs?

55
00:03:44,000 --> 00:03:47,990
Well, as I mentioned before, solid background colors allow you to add

56
00:03:48,000 --> 00:03:50,990
visual definition to elements and to help draw attention to important

57
00:03:51,000 --> 00:03:53,990
sections of content.

58
00:03:54,000 --> 00:03:57,990
Going back to the design that I showed you earlier, I want you to take a look at

59
00:03:58,000 --> 00:04:01,990
the headings for the secondary sections on this page.

60
00:04:02,000 --> 00:04:05,990
Now, for search engines' and accessibility's sake, I really need the text to

61
00:04:06,000 --> 00:04:11,990
remain, but visually, I wanted to display the text in a way that CSS won't let

62
00:04:12,000 --> 00:04:12,990
me do stylistically.

63
00:04:13,000 --> 00:04:16,990
So in this case--I want to go ahead and turn the styles back on here.

64
00:04:17,000 --> 00:04:22,990
In this case, I use CSS to move the text off of the page visually and then use a

65
00:04:23,000 --> 00:04:25,990
background image to display in its place.

66
00:04:26,000 --> 00:04:30,990
So screen readers, search engines, or bots will still see the headings, while

67
00:04:31,000 --> 00:04:34,990
people that are looking at the visual design see the headings the way that I

68
00:04:35,000 --> 00:04:35,990
wanted them to display.

69
00:04:36,000 --> 00:04:40,990
Now on the same page, I am using background images to display icons, custom

70
00:04:41,000 --> 00:04:46,990
paragraph rules, and even the company logo without sacrificing accessibility or

71
00:04:47,000 --> 00:04:49,990
adding unnecessary image tags to the content.

72
00:04:50,000 --> 00:04:53,990
As you can imagine, there's a lot more to the background property than

73
00:04:54,000 --> 00:04:54,990
what we've covered here.

74
00:04:55,000 --> 00:04:58,990
I just want you to understand how important the background property is to visual

75
00:04:59,000 --> 00:05:03,990
design and encourage you to make sure that the background property is one that

76
00:05:04,000 --> 00:05:14,000
you put specific emphasis on as you learn CSS.