Hello everyone and welcome back to our bootstrap course.
In this lecture we're going to be finishing the styling for a header here in order to show the text
and the button of the product information overtop this image here.
So let's go ahead and open our CSX and hide the output.
OK.
Excellent.
So right now we have the header CSX and the header image CFS which allow the image to be shown at 100
percent the screen size.
And now we're going to also add some Morsi assets.
So for the header and its container image specifically we're going to style the positioning.
So when you styled something like this it means you are styling the container inside of the header.
So if you go back to the e-mail you see here we have a header and then we have a container inside of
the header.
And by styling header space dot container we're finding every element in the header that has the class
Container.
If there's a container outside the header this styling will not be applied to it.
OK.
I'm going to hide e-mail now and go ahead and style this header.
So I'm going to change the position to a relative or rather set its position to relative because often
four elements the default position is relative.
But regardless you still want to declare it like this position relative.
OK.
And also I'm going to change it is the index to two.
Now remember the z index is the depth of the element.
So 1 is the default.
So for example this text right here that I see on the page it has a depth of 1 because it's all on the
same depth the white background will have a depth of zero.
If I change these the index to It means I'm pushing an element in front of all the others.
If I change it to three I would push that element even further in front of all the others.
So the larger number wins out in terms of being shown first or at the top most of the screen.
So I'm going to go to my e-mail here and see that I have this one container and this container contains
all of my text.
So by giving it the C position or z index to that means I'm moving all the text to be in front of the
image.
OK great.
So I'm going to go ahead and toggle the e-mail here.
So this will move all the text on top of the image.
I'm also going to style the headers overly class so any element with the class overlay in the header
will have this positioning.
Now what is overlay.
Well I'm going to toggle this process for a second the overlay is this div right here.
So you'll notice it's inside of the header but it's above all of the other elements in the code.
And it does not contain anything inside of itself.
It has its own empty div so it's style that empty div.
What we're going to do is position it to absolute.
This is the same positioning that we gave to the image itself because we want this overlay to be a light
black overlay on top of the image.
So a grey overlay to make the image a bit darker.
So that way the text is more readable on top the image and you'll see the effect.
Once we preview it in the output.
OK.
So I'm setting it to position absolute exactly the same as the image here but I'm going to change its
actual positioning to be zero pixels from the top and zero pixels from the left.
So that means it will begin at the very top most corner in terms of its creation.
So we'll be created at the topmost left corner and it should actually size it.
I have to set its width and height.
So I'm going to set its height 200 percent which means it will be 100 percent of its parent and its
parent is the body.
And we set the body to have a height of 100 percent of the HMO which means that percentage hey will
work if you tried to sell an element with a percentage but its parent or any of its parents its grandparents
any of its ancestors did not have a a positioning of with or height.
So for example if you tried to sell a height to be 20 percent but none of its parents had a height explicitly
declared then that would not work.
The percentage sizing.
So that is why we set the heightened width of it's absolute most parent.
OK.
We also want to do the same for the width to set it to 100 percent.
We're going to give this give the background color black.
So what we've done is created a device or a box and the box empty.
But we set its height and with 100 percent of the screen and then we set it's background color to black
which means it'll be a box of 100 percent of its parent which is the body which is the screen.
And then we set it back on color to fill it with a black color.
What we're also going to add is the opacity now opacity is a number that is a decimal from 0 to 1.
So zero would mean absolute opacity which means the div would be completely transparent.
It would be invisible.
One would mean that the div would be completely shown.
So it would not be transparent at all.
It would be completely opaque.
Zero point five means the element would be half transparent.
So it would be half invisible.
Zero point seven means it would be slightly more visible than transparent.
But it would still have a bit of a faded effect.
So we have to see how that looks like in the output.
But again set the opacity to zero point seven and you can test this number to find the best one that
works for you in this specific case by zero point seven is a good design.
We're also going to set the Zi index of the overlay to 1 which means that it will be on top of the image
because the images the index is zero.
So we'll be on top of the image but it will still be behind the container which has all the text.
So let's go ahead and preview how this looks like in the output.
So I'm going to click on the output and as you can see now I have my background image with my text on
top and my button on top.
OK.
Great.
Now you can see this text is still gray.
So I'm going to go ahead and change that by opening this.
Yes yes.
And hiding output and to give the H1 a color you call H1 by its element name.
Notice that we're not calling it by its class name.
We're just calling it by its element name which you can do for all of the elements.
So I'm going to give us each one color or wait which will change its text color to white.
Now I can go to the output and I'll see that you text will now be white and instead of that great color.
Okay excellent.
So now we have set up our header with a background image and a darker overlay.
You'll notice the image looks a bit darker than it did previously because we added an overlay and as
well we have our button here and our text.
Now this isn't looking exactly perfect but that's fine it's good enough for now and we can add extra
styling at the end.
You don't have to do all your styling immediately because as you build your website the styling might
change.
So you don't want to sell too much too early.
OK.
Other than that that is everything we're going to cover in this lecture in the next lecture.
We're going to go ahead and work more on the HCM El.
We are going to fill out after the header.
We are now going to fill out the pricing header and the container.
So this will contain pricing information and pricing options about our product.
Thank you all for watching and we will see you in the next lecture.