1
00:00:00,000 --> 00:00:02,120
[treehouse presents]

2
00:00:02,120 --> 00:00:05,610
[Full Page Background Images In CSS with Guil Hernandez]

3
00:00:05,610 --> 00:00:07,050
Hey, guys, I’m Guil.

4
00:00:07,050 --> 00:00:09,100
In this Treehouse quick tip, we’ll learn about a

5
00:00:09,100 --> 00:00:11,900
neat new CSS3 property and value we can use

6
00:00:11,900 --> 00:00:14,180
to create scalable full-page background images.

7
00:00:14,180 --> 00:00:16,079
Let’s get started.

8
00:00:16,079 --> 00:00:18,600
Here we have a page containing a background image,

9
00:00:18,600 --> 00:00:20,530
and as you’ve probably noticed,

10
00:00:20,530 --> 00:00:22,830
the image appears too large.

11
00:00:22,830 --> 00:00:24,960
Parts of the image are being cut off,

12
00:00:24,960 --> 00:00:28,410
and it does not scale to the size of the browser window.

13
00:00:28,410 --> 00:00:30,400
So things could be much better here.

14
00:00:30,400 --> 00:00:32,530
A good solution would be to scale the image

15
00:00:32,530 --> 00:00:35,100
to make it fit within different window sizes

16
00:00:35,100 --> 00:00:37,660
while preserving its original proportions.

17
00:00:37,660 --> 00:00:41,700
Well, we can do just that with one easy CSS declaration.

18
00:00:41,700 --> 00:00:45,100
In our CSS, below our background declaration,

19
00:00:45,100 --> 00:00:47,900
we’ll add the background size property.

20
00:00:49,360 --> 00:00:51,820
Besides the usual numeric length values,

21
00:00:51,820 --> 00:00:55,830
the background size property has a particular predefined value

22
00:00:55,830 --> 00:00:58,340
that ensures your background image will display

23
00:00:58,340 --> 00:01:00,320
entirely at a scaled size,

24
00:01:00,320 --> 00:01:03,510
and that value is cover.

25
00:01:03,510 --> 00:01:07,100
The cover value fills the entire background positioning area,

26
00:01:07,100 --> 00:01:10,150
which in this case is the HTML element.

27
00:01:10,150 --> 00:01:14,000
It adjusts the image to completely contain the browser window

28
00:01:14,000 --> 00:01:17,290
and scales it so that both its width and height

29
00:01:17,290 --> 00:01:20,370
display proportionately as a full background image.

30
00:01:20,370 --> 00:01:25,640
So just make sure that the height value is set to 100%.

31
00:01:27,190 --> 00:01:30,080
Using the cover value does allow for overflow

32
00:01:30,080 --> 00:01:32,750
when the background image proportions don’t exactly

33
00:01:32,750 --> 00:01:35,550
match those of the containing area.

34
00:01:35,550 --> 00:01:42,650
So some parts may get cut off if the area is too narrow or short.