1 00:00:02,360 --> 00:00:04,270 To understand the next task, 2 00:00:04,270 --> 00:00:07,900 I again have our finished page right here. 3 00:00:07,900 --> 00:00:11,160 We worked on our header, we have this logo already, 4 00:00:11,160 --> 00:00:14,540 and we also have these navigation items, 5 00:00:14,540 --> 00:00:17,300 not perfectly styled yet, but we are coming closer. 6 00:00:17,300 --> 00:00:20,580 And now it's time to work on this whole part here, 7 00:00:20,580 --> 00:00:23,093 so basically the part with this image, 8 00:00:23,093 --> 00:00:24,680 this background image, 9 00:00:24,680 --> 00:00:27,750 and then with this element here in the middle, 10 00:00:27,750 --> 00:00:29,750 with Joe's Travel page, with some text, 11 00:00:29,750 --> 00:00:31,890 and then this link in the end. 12 00:00:31,890 --> 00:00:33,900 This will be our next goal. 13 00:00:33,900 --> 00:00:36,380 So the question now is how can we add 14 00:00:36,380 --> 00:00:38,280 such a background image here? 15 00:00:38,280 --> 00:00:39,800 How can we add this element, 16 00:00:39,800 --> 00:00:42,563 and all the remaining content that we have in here? 17 00:00:43,830 --> 00:00:47,370 To do that, I'm back in the index HTML file, 18 00:00:47,370 --> 00:00:49,630 and in our main part here, 19 00:00:49,630 --> 00:00:53,840 we added two sections at the beginning of this module. 20 00:00:53,840 --> 00:00:56,690 The first section will be exactly this part, 21 00:00:56,690 --> 00:00:59,150 so this whole part with this background image 22 00:00:59,150 --> 00:01:02,300 and this box we saw with all the information 23 00:01:02,300 --> 00:01:03,910 about Joe's Travel page. 24 00:01:03,910 --> 00:01:06,250 The second section will be the section 25 00:01:06,250 --> 00:01:09,710 about the highlights below our image. 26 00:01:09,710 --> 00:01:11,940 Therefore, as we have two sections, 27 00:01:11,940 --> 00:01:14,420 but two unique sections in the end, 28 00:01:14,420 --> 00:01:17,420 I would like to add two IDs first. 29 00:01:17,420 --> 00:01:20,460 The first section will have the ID, hero, 30 00:01:20,460 --> 00:01:22,980 because it contains this hero image. 31 00:01:22,980 --> 00:01:25,970 And the second section will also get an ID, 32 00:01:25,970 --> 00:01:29,180 and this will simply be the ID, highlights, 33 00:01:29,180 --> 00:01:30,450 because in this section, 34 00:01:30,450 --> 00:01:33,060 we will add all the highlights to our page, 35 00:01:33,060 --> 00:01:37,660 therefore we can differentiate these two sections. 36 00:01:37,660 --> 00:01:40,700 Let's focus onto this hero section now. 37 00:01:40,700 --> 00:01:41,910 You might say that in here, 38 00:01:41,910 --> 00:01:43,560 well, it's clear we need an image 39 00:01:43,560 --> 00:01:46,210 and then we have to add this element. 40 00:01:46,210 --> 00:01:47,310 The problem here though 41 00:01:47,310 --> 00:01:50,730 is that what we learned about elements so far, 42 00:01:50,730 --> 00:01:53,950 is that we have inline elements and block elements, 43 00:01:53,950 --> 00:01:57,350 with block elements being displayed one after another. 44 00:01:57,350 --> 00:01:59,670 So here for example, two block elements. 45 00:01:59,670 --> 00:02:03,670 And with inline elements being displayed next to each other. 46 00:02:03,670 --> 00:02:08,310 But this image is kind of behind all these elements, 47 00:02:08,310 --> 00:02:11,990 and it's also behind our header here. 48 00:02:11,990 --> 00:02:14,670 So this seems to be out of this logic, 49 00:02:14,670 --> 00:02:18,300 out of the so-called document flow as we call it. 50 00:02:18,300 --> 00:02:21,320 So this positioning of one element after another, 51 00:02:21,320 --> 00:02:24,360 or next to each other for inline elements. 52 00:02:24,360 --> 00:02:27,760 Well, things become a bit more tricky here, 53 00:02:27,760 --> 00:02:31,060 but the solution is easy because a background image 54 00:02:31,060 --> 00:02:34,000 is nothing you add in HTML, 55 00:02:34,000 --> 00:02:37,150 it's something you add via CSS. 56 00:02:37,150 --> 00:02:39,090 Let's find out how this works, 57 00:02:39,090 --> 00:02:42,360 for this I'm back in the code, 58 00:02:42,360 --> 00:02:47,360 and first I would like to add the content of the pop up box. 59 00:02:48,620 --> 00:02:51,250 So this content here, then we focus 60 00:02:51,250 --> 00:02:54,290 on to this implementation of the background image. 61 00:02:54,290 --> 00:02:56,060 The content here is quite easy, 62 00:02:56,060 --> 00:03:01,060 we have an h1 element saying, Joe's travel page. 63 00:03:01,820 --> 00:03:06,820 Afterwards we have a paragraph with the text, 64 00:03:06,940 --> 00:03:11,543 let's explore the world together. 65 00:03:15,500 --> 00:03:17,560 And then we don't have another paragraph, 66 00:03:17,560 --> 00:03:19,720 but we have an anchor tag once again, 67 00:03:19,720 --> 00:03:24,720 so a reference to our places HTML page, 68 00:03:26,060 --> 00:03:28,100 because that's the empty page right here, 69 00:03:28,100 --> 00:03:30,780 but this button, which it will become in the end, 70 00:03:30,780 --> 00:03:33,930 should redirect us to this places page, 71 00:03:33,930 --> 00:03:37,270 and it should say, discover places. 72 00:03:37,270 --> 00:03:39,810 Like this, if we check our page, 73 00:03:39,810 --> 00:03:42,300 yep, we see we are coming a bit closer, 74 00:03:42,300 --> 00:03:47,300 we have the content of this box here basically. 75 00:03:47,350 --> 00:03:50,390 Of course with our missing styling, but it's okay. 76 00:03:50,390 --> 00:03:53,480 The problem now though is that we need an image 77 00:03:53,480 --> 00:03:55,620 behind that content. 78 00:03:55,620 --> 00:03:59,050 And actually the image should be positioned right here, 79 00:03:59,050 --> 00:04:00,550 behind that section. 80 00:04:00,550 --> 00:04:03,060 Maybe not perfect from a height perspective, 81 00:04:03,060 --> 00:04:04,660 and also not behind the header. 82 00:04:04,660 --> 00:04:07,150 This is something we'll tackle a bit later, 83 00:04:07,150 --> 00:04:10,120 but actually this section should now have 84 00:04:10,120 --> 00:04:13,060 a background image, but not this element, 85 00:04:13,060 --> 00:04:14,890 this one, or that one. 86 00:04:14,890 --> 00:04:17,130 And the great thing about background images, 87 00:04:17,130 --> 00:04:19,370 in contrast to normal images, 88 00:04:19,370 --> 00:04:22,132 that we saw in the previous module. 89 00:04:22,132 --> 00:04:27,000 Is that we can add background images via CSS, 90 00:04:27,000 --> 00:04:29,150 to a specific element. 91 00:04:29,150 --> 00:04:31,300 This means we could add the background image 92 00:04:31,300 --> 00:04:33,670 to this element right here, and this would look great, 93 00:04:33,670 --> 00:04:35,630 so we would have that background image, 94 00:04:35,630 --> 00:04:37,310 and we could give this a try now actually, 95 00:04:37,310 --> 00:04:38,290 so let's do this. 96 00:04:38,290 --> 00:04:41,830 So we go back, we select the ID, hero, here 97 00:04:41,830 --> 00:04:43,730 and where to be selected. 98 00:04:43,730 --> 00:04:47,240 Not in the shared CSS file, but in the style CSS file, 99 00:04:47,240 --> 00:04:51,510 as this specific style only affects our landing page. 100 00:04:51,510 --> 00:04:53,973 So we select the ID, hero. 101 00:04:56,230 --> 00:05:01,030 And now in here, I'll first change the height a bit, 102 00:05:01,030 --> 00:05:03,320 because it doesn't seem to have enough height 103 00:05:03,320 --> 00:05:04,560 to really show us the image, 104 00:05:04,560 --> 00:05:07,040 so we changed this to 800 pixels. 105 00:05:07,040 --> 00:05:09,530 To see, now this is a lot bigger. 106 00:05:09,530 --> 00:05:11,200 I zoomed in a lot by the way, 107 00:05:11,200 --> 00:05:14,980 therefore you see the enter page being highlighted. 108 00:05:14,980 --> 00:05:17,110 Now you see better, this would be the part 109 00:05:17,110 --> 00:05:19,403 that now contains our background image. 110 00:05:20,400 --> 00:05:23,790 And now the second thing is, well, a background image. 111 00:05:23,790 --> 00:05:28,410 For this I'll first create a new folder named, images. 112 00:05:28,410 --> 00:05:32,220 And then please open this images folder right here, 113 00:05:32,220 --> 00:05:36,440 and add two more folders, the places folder, 114 00:05:36,440 --> 00:05:39,350 and create another folder named, icons. 115 00:05:39,350 --> 00:05:41,670 With that, you should have a structure of an images folder 116 00:05:41,670 --> 00:05:43,890 with two other folders. 117 00:05:43,890 --> 00:05:46,770 Let's use the structure, as throughout module, 118 00:05:46,770 --> 00:05:49,580 we'll add images of places and our Facebook 119 00:05:49,580 --> 00:05:53,290 and Instagram icons, and I want to keep things organized. 120 00:05:53,290 --> 00:05:55,130 But with these folders being created, 121 00:05:55,130 --> 00:05:56,610 you can now take the file, 122 00:05:56,610 --> 00:05:58,570 which you can find attached to this lecture, 123 00:05:58,570 --> 00:06:01,590 the ocean JPEG file and drag and drop it 124 00:06:01,590 --> 00:06:03,090 into the places folder. 125 00:06:03,090 --> 00:06:05,750 So this should be this image right here now. 126 00:06:05,750 --> 00:06:06,744 And the cool thing now is that if we go back 127 00:06:06,744 --> 00:06:11,744 to our style CSS file, we can use a new property named, 128 00:06:13,060 --> 00:06:18,060 background image, and this property now allows us 129 00:06:19,390 --> 00:06:22,833 to use the URL value, and with that URL value, 130 00:06:24,090 --> 00:06:26,560 we can now add our quotation marks, 131 00:06:26,560 --> 00:06:30,020 and directly point towards the images folder, 132 00:06:30,020 --> 00:06:31,417 there to the places folder, 133 00:06:31,417 --> 00:06:34,320 and there to our image that we just added. 134 00:06:34,320 --> 00:06:35,870 So if you add a slash, 135 00:06:35,870 --> 00:06:37,990 you should see images, index HTML, 136 00:06:37,990 --> 00:06:39,940 places HTML, and shared CSS. 137 00:06:39,940 --> 00:06:43,543 So we are starting from our current location, which is here, 138 00:06:44,560 --> 00:06:47,700 then we go into the images folder, 139 00:06:47,700 --> 00:06:51,180 there we go to places, ocean JPEG. 140 00:06:51,180 --> 00:06:54,750 And if we save this now, go back to our project. 141 00:06:54,750 --> 00:06:57,450 You see that we added this background image. 142 00:06:57,450 --> 00:07:00,680 And that's pretty cool, because now we have this image 143 00:07:00,680 --> 00:07:03,910 behind our other elements here, because, 144 00:07:03,910 --> 00:07:08,440 well, these elements are children of this section here, 145 00:07:08,440 --> 00:07:10,550 therefore, this is perfectly working. 146 00:07:10,550 --> 00:07:11,813 With an image and the inline element, 147 00:07:11,813 --> 00:07:15,280 this would be a bit more tricky. 148 00:07:15,280 --> 00:07:19,170 Nevertheless, the image is not being visible perfectly, 149 00:07:19,170 --> 00:07:21,230 because if we check the image in our folder, 150 00:07:21,230 --> 00:07:24,250 you see it actually has this surfer girl, 151 00:07:24,250 --> 00:07:25,130 here in the middle, 152 00:07:25,130 --> 00:07:28,170 so we should see the image kind of like this, 153 00:07:28,170 --> 00:07:30,010 but we can also change the way 154 00:07:30,010 --> 00:07:32,470 our background image is displayed here. 155 00:07:32,470 --> 00:07:36,680 For this, we can add two core properties. 156 00:07:36,680 --> 00:07:40,423 The first one is the background position. 157 00:07:41,600 --> 00:07:44,330 Here, We will use the center value, 158 00:07:44,330 --> 00:07:47,260 with center you see that now we have the surfer 159 00:07:47,260 --> 00:07:50,520 in the middle of our image, 160 00:07:50,520 --> 00:07:52,460 but it's zoomed in a bit here, 161 00:07:52,460 --> 00:07:54,380 so not the entire image is displayed, 162 00:07:54,380 --> 00:07:57,330 so it doesn't look perfect from a quality perspective. 163 00:07:57,330 --> 00:07:59,630 For this, we'll add one more property, 164 00:07:59,630 --> 00:08:02,900 and this property is called, background size. 165 00:08:05,890 --> 00:08:07,874 Here, we have different options available, 166 00:08:07,874 --> 00:08:10,720 a very commonly used one is cover, 167 00:08:10,720 --> 00:08:13,790 so it will basically cover the entire element. 168 00:08:13,790 --> 00:08:15,420 And with that being in place, 169 00:08:15,420 --> 00:08:18,823 this image looks pretty cool as I would call it. 170 00:08:19,800 --> 00:08:21,800 We still have a problem though, 171 00:08:21,800 --> 00:08:24,260 because we now have this background image here, 172 00:08:24,260 --> 00:08:25,930 but we also need a box, 173 00:08:25,930 --> 00:08:30,910 so this black box here behind our elements, 174 00:08:30,910 --> 00:08:33,650 and at the moment this is not working right, because, well, 175 00:08:33,650 --> 00:08:36,530 we cannot format the section here with a different color, 176 00:08:36,530 --> 00:08:38,750 it's required for the image. 177 00:08:38,750 --> 00:08:41,953 So time to dig a bit deeper here as a next step.