In this lecture we will be placing text on an image using CSS, as showing 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 will be working with nested divs. A nested
<div> is a
<div> that is contained within another. The
<div> that contains the nested
<div>, is known as a container.
To begin, create a basic html page structure. Save the file as imagetext.html.
The files for this lesson are located in your downloads folder.
Now let's create a style sheet and two id selectors. One id for the
<div> that will have the background image. The second for the
<div> that will contain the black text box.
background-image declaration is used to attach the background image to the
padding declaration will add a 40px space between the text box perimeter and background perimieter.
Now we will create the second id:
Lastly we need to create a class, for the text that will be inside the text box.
With our style sheet complete, we can create our divs.
<div> will reference id background. This
<div> will contain the background image.
<div> will reference id textbox, which will contain the text.
<div> will contain the text.
With our divs created, let's preview this in our web browser.