1 00:00:00,900 --> 00:00:07,760 In this lecture we'll be placing text on an image using C Ss as shown in this example. 2 00:00:07,780 --> 00:00:12,010 Here you can see we have a div that contains a background image. 3 00:00:12,010 --> 00:00:19,640 We also have a div that contains a semi transparent text box with some text in order to do this. 4 00:00:19,660 --> 00:00:27,430 We'll be working with nested divs a nested div is a div that is contained within another div that contains 5 00:00:27,430 --> 00:00:37,320 the nested div is known as a container to begin create a basic HDMI page structure and save the file 6 00:00:37,470 --> 00:00:39,830 is image text that HMO 7 00:00:42,810 --> 00:00:49,000 the files for this lesson are located in your Downloads folder. 8 00:00:49,030 --> 00:00:54,100 Now let's create a style sheet with two I.D. selectors. 9 00:00:54,130 --> 00:01:00,580 One idea for the div that will have the background image and the second for the div that will contain 10 00:01:00,580 --> 00:01:02,110 the block text box 11 00:01:10,580 --> 00:01:12,940 we'll call the first I.D. selector background 12 00:01:20,490 --> 00:01:22,110 we'll start with a background image. 13 00:01:22,110 --> 00:01:22,800 Declaration 14 00:01:30,260 --> 00:01:41,180 will set the path to the T X TB G dodgy RPG file and again this file is located in your Downloads folder. 15 00:01:45,140 --> 00:01:51,020 Once you have that declaration complete also put in a padding declaration of 40 pixels 16 00:02:00,420 --> 00:02:08,540 the padding declaration will add a 40 pixel space between the text box perimeter in the background perimeter 17 00:02:08,900 --> 00:02:12,720 as shown here that's this space right over here 18 00:02:19,280 --> 00:02:21,200 now we'll create the second I.D. selector 19 00:02:28,620 --> 00:02:30,040 and we'll call this text box 20 00:02:39,520 --> 00:02:42,130 we can set the with two auto 21 00:02:47,700 --> 00:02:52,500 so it takes up the full length of its container which will be the background div 22 00:02:56,370 --> 00:03:01,830 set the height to 100 pixels opacity will set to 80 percent 23 00:03:10,870 --> 00:03:12,100 background colors black 24 00:03:19,270 --> 00:03:31,020 and the padding will be 10 pixels. 25 00:03:31,050 --> 00:03:41,740 This will create some spacing from the from the text inside the div to the perimeter of the block text 26 00:03:41,740 --> 00:03:44,500 box and see we have a space here. 27 00:03:51,540 --> 00:03:58,140 Lastly we need to create one class and this will just make our text color white 28 00:04:11,960 --> 00:04:13,370 with our style sheet complete. 29 00:04:13,370 --> 00:04:17,060 We can create our divs in the body between the body tags 30 00:04:25,720 --> 00:04:31,960 the first div will be our background so will reference the eye the the background I.D. 31 00:04:36,870 --> 00:04:38,220 inside the background 32 00:04:43,840 --> 00:04:46,120 we'll be nesting the text box div 33 00:05:02,740 --> 00:05:11,190 and inside the text box div will be nesting a day that will contain the text so will attach to the text. 34 00:05:11,190 --> 00:05:11,820 Class 35 00:05:15,140 --> 00:05:15,680 to this div 36 00:05:23,610 --> 00:05:30,670 okay now you'll just need to type some text inside this div you can either copy your block of text or 37 00:05:30,670 --> 00:05:39,060 you can type your own I'll just paste in a block I have here. 38 00:05:39,410 --> 00:05:44,750 So with that created we can save or file and let's go ahead and preview it. 39 00:05:48,910 --> 00:05:55,630 And so there we have it the background image the text box and the white text contained within the text 40 00:05:55,630 --> 00:06:00,990 box can also see that the background of the text box is semi transparent.