To understand the next task,
I again have our finished page right here.
We worked on our header, we have this logo already,
and we also have these navigation items,
not perfectly styled yet, but we are coming closer.
And now it's time to work on this whole part here,
so basically the part with this image,
this background image,
and then with this element here in the middle,
with Joe's Travel page, with some text,
and then this link in the end.
This will be our next goal.
So the question now is how can we add
such a background image here?
How can we add this element,
and all the remaining content that we have in here?
To do that, I'm back in the index HTML file,
and in our main part here,
we added two sections at the beginning of this module.
The first section will be exactly this part,
so this whole part with this background image
and this box we saw with all the information
about Joe's Travel page.
The second section will be the section
about the highlights below our image.
Therefore, as we have two sections,
but two unique sections in the end,
I would like to add two IDs first.
The first section will have the ID, hero,
because it contains this hero image.
And the second section will also get an ID,
and this will simply be the ID, highlights,
because in this section,
we will add all the highlights to our page,
therefore we can differentiate these two sections.
Let's focus onto this hero section now.
You might say that in here,
well, it's clear we need an image
and then we have to add this element.
The problem here though
is that what we learned about elements so far,
is that we have inline elements and block elements,
with block elements being displayed one after another.
So here for example, two block elements.
And with inline elements being displayed next to each other.
But this image is kind of behind all these elements,
and it's also behind our header here.
So this seems to be out of this logic,
out of the so-called document flow as we call it.
So this positioning of one element after another,
or next to each other for inline elements.
Well, things become a bit more tricky here,
but the solution is easy because a background image
is nothing you add in HTML,
it's something you add via CSS.
Let's find out how this works,
for this I'm back in the code,
and first I would like to add the content of the pop up box.
So this content here, then we focus
on to this implementation of the background image.
The content here is quite easy,
we have an h1 element saying, Joe's travel page.
Afterwards we have a paragraph with the text,
let's explore the world together.
And then we don't have another paragraph,
but we have an anchor tag once again,
so a reference to our places HTML page,
because that's the empty page right here,
but this button, which it will become in the end,
should redirect us to this places page,
and it should say, discover places.
Like this, if we check our page,
yep, we see we are coming a bit closer,
we have the content of this box here basically.
Of course with our missing styling, but it's okay.
The problem now though is that we need an image
behind that content.
And actually the image should be positioned right here,
behind that section.
Maybe not perfect from a height perspective,
and also not behind the header.
This is something we'll tackle a bit later,
but actually this section should now have
a background image, but not this element,
this one, or that one.
And the great thing about background images,
in contrast to normal images,
that we saw in the previous module.
Is that we can add background images via CSS,
to a specific element.
This means we could add the background image
to this element right here, and this would look great,
so we would have that background image,
and we could give this a try now actually,
so let's do this.
So we go back, we select the ID, hero, here
and where to be selected.
Not in the shared CSS file, but in the style CSS file,
as this specific style only affects our landing page.
So we select the ID, hero.
And now in here, I'll first change the height a bit,
because it doesn't seem to have enough height
to really show us the image,
so we changed this to 800 pixels.
To see, now this is a lot bigger.
I zoomed in a lot by the way,
therefore you see the enter page being highlighted.
Now you see better, this would be the part
that now contains our background image.
And now the second thing is, well, a background image.
For this I'll first create a new folder named, images.
And then please open this images folder right here,
and add two more folders, the places folder,
and create another folder named, icons.
With that, you should have a structure of an images folder
with two other folders.
Let's use the structure, as throughout module,
we'll add images of places and our Facebook
and Instagram icons, and I want to keep things organized.
But with these folders being created,
you can now take the file,
which you can find attached to this lecture,
the ocean JPEG file and drag and drop it
into the places folder.
So this should be this image right here now.
And the cool thing now is that if we go back
to our style CSS file, we can use a new property named,
background image, and this property now allows us
to use the URL value, and with that URL value,
we can now add our quotation marks,
and directly point towards the images folder,
there to the places folder,
and there to our image that we just added.
So if you add a slash,
you should see images, index HTML,
places HTML, and shared CSS.
So we are starting from our current location, which is here,
then we go into the images folder,
there we go to places, ocean JPEG.
And if we save this now, go back to our project.
You see that we added this background image.
And that's pretty cool, because now we have this image
behind our other elements here, because,
well, these elements are children of this section here,
therefore, this is perfectly working.
With an image and the inline element,
this would be a bit more tricky.
Nevertheless, the image is not being visible perfectly,
because if we check the image in our folder,
you see it actually has this surfer girl,
here in the middle,
so we should see the image kind of like this,
but we can also change the way
our background image is displayed here.
For this, we can add two core properties.
The first one is the background position.
Here, We will use the center value,
with center you see that now we have the surfer
in the middle of our image,
but it's zoomed in a bit here,
so not the entire image is displayed,
so it doesn't look perfect from a quality perspective.
For this, we'll add one more property,
and this property is called, background size.
Here, we have different options available,
a very commonly used one is cover,
so it will basically cover the entire element.
And with that being in place,
this image looks pretty cool as I would call it.
We still have a problem though,
because we now have this background image here,
but we also need a box,
so this black box here behind our elements,
and at the moment this is not working right, because, well,
we cannot format the section here with a different color,
it's required for the image.
So time to dig a bit deeper here as a next step.