In this lecture we'll be placing text on an image using C Ss as shown in this example.
Here you can see we have a div that contains a background image.
We also have a div that contains a semi transparent text box with some text in order to do this.
We'll be working with nested divs a nested div is a div that is contained within another div that contains
the nested div is known as a container to begin create a basic HDMI page structure and save the file
is image text that HMO
the files for this lesson are located in your Downloads folder.
Now let's create a style sheet with two I.D. selectors.
One idea for the div that will have the background image and the second for the div that will contain
the block text box
we'll call the first I.D. selector background
we'll start with a background image.
Declaration
will set the path to the T X TB G dodgy RPG file and again this file is located in your Downloads folder.
Once you have that declaration complete also put in a padding declaration of 40 pixels
the padding declaration will add a 40 pixel space between the text box perimeter in the background perimeter
as shown here that's this space right over here
now we'll create the second I.D. selector
and we'll call this text box
we can set the with two auto
so it takes up the full length of its container which will be the background div
set the height to 100 pixels opacity will set to 80 percent
background colors black
and the padding will be 10 pixels.
This will create some spacing from the from the text inside the div to the perimeter of the block text
box and see we have a space here.
Lastly we need to create one class and this will just make our text color white
with our style sheet complete.
We can create our divs in the body between the body tags
the first div will be our background so will reference the eye the the background I.D.
inside the background
we'll be nesting the text box div
and inside the text box div will be nesting a day that will contain the text so will attach to the text.
Class
to this div
okay now you'll just need to type some text inside this div you can either copy your block of text or
you can type your own I'll just paste in a block I have here.
So with that created we can save or file and let's go ahead and preview it.
And so there we have it the background image the text box and the white text contained within the text
box can also see that the background of the text box is semi transparent.