How can we now change the style
of our element here?
Well, first what we can do besides top 0,
we can also add left 0 to align it
to the left of our HTML element in this case,
which looks all right.
But now as a second step,
we need to take the entire width of the page, again,
of the HTML element in our case,
to bring it to the right.
We could, of course, use the width property here
and set a width of 150 pixels, for example,
anything like this.
So with trial and error,
we could make sure that it covers the entire page.
Of course,
this is not a solution that works
because we have different display sizes.
Therefore this would never be an option.
For this, we will introduce another important unit
besides our pixels, the percentage unit.
As the name indicates, the percentage value is
relative to another element,
typically the parent element,
and therefore tells our element,
the width of it, comparing to this other element.
If you could follow this logic right here,
then we could say, we can use a width of 100%.
This would mean we use 100% of the parent element,
which in this case would be 100% of the HTML element.
At least according to the logic that we saw
when it comes to the position property here.
However, if you look at that,
we see that, well,
it's a lot bigger than these 100%.
I can zoom, oops.
I can zoom out of bit here, of course, 100%
Because it's zoomed in.
So now you have a better overview
of the amount it overflows here.
Let's inspect this, let's see what's going on.
We are in the container and we are on element two.
And here we said, it should be 100% of the width.
And as I said, this is the width of the parent element,
actually, which for the position property,
whilst the HTML element.
Let's not inspect the parents
and let's know see what this width is relative to.
We have a width of 738 pixels here.
For the content,
let's keep that in mind.
We also have a padding,
but we'll ignore this for a moment.
So let's remember this 738 pixels
for the content of this element.
The container,
which would be the closest parent
has a width of 682 pixels for the content
plus 44 for the padding, which would be 722,
not the 738 we need.
So let's move one level up to the body.
The body also has 722.
So again, not the 738 we need.
So let's check out the HTML element.
Here we have the 738 again.
So the width of the HTML element for the content is the same
as the 100% of the content of our element 2 here,
which has width 100% applied.
The problem here though,
is that we actually want the entire element to have
100% of the word of the HTML element in this case.
But with the default setting in CSS,
this is not working because the so-called box sizing
another property, which I can add right here.
So box sizing.
This is set to content box.
If I save this, nothing changes,
as you can see, it still has this over floating part here.
Because by default,
the percentage value of the width
refers to the entire width of the parent element.
In our case, the HTML element,
which would be 738 pixels.
And this would, is then applied to the
content of our element.
But what we want is actually,
we want our entire element, sort of content,
including the padding here to be 738 pixels wide.
We can achieve this by changing the box sizing
from content box to border box, like this.
Now, as you see,
the content of our element is just 638 pixels wide
plus 50 pixels padding to the left
and 50 pixels padding to the right.
And with that, our scrolling to the left to the right,
is not working anymore.
This would also work for borders.
If we add a border of maybe 10 pixels solid and black,
just a quick one here,
then our content size would again reduce now to 618 pixels
plus 100 padding left and right,
plus 20, so again,
the 738 we have in the HTML element.
If it would add a margin,
this would not work because the border box value only
applies to content padding and border.
We don't need the border here though.
Therefore we can ignore this.
And with that, we learned all the concepts
we need to add the header in a way that the background image
can be displayed behind that header.
So keep in mind that we have different values
for our position property.
Values to take the element
where the position properties applied
out of the document flow,
our position absolute and position fixed.
Position fixed will create a fixed element,
meaning fixed to the viewport.
So if I, again,
zoom in here,
it will be fixed to this visible area.
The so-called viewport,
the rest position absolute takes the element
out of the document flow and positions it
relative to a parent element,
in our case,
the HTML element as we don't have another parent
another ancestor,
which has the position relative ruled applied.
As I said,
more exceptions from that rule
can be found in the detailed information
attached to the last lecture of this module.
Besides that we also learned about the percentage value
for the width property here,
Which then sets the width relative to an ancestor.
In our case, again,
the HTML element due to the reasons I just explained.
And I learned that the percentage value of an element
has to be monitored closely
because we have to decide if this percentage should mean
that the padding and the border are included or not.
We can change this behavior with the box sizing property,
either border box or by default content box.
So that was a lot of information again.
Therefore in the next lecture,
we'll apply this knowledge in our project.