Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

8,215

Rating:

(88)

Certification Type:

Completion Certificate

Lecture: CSS Text on Top of Images

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 {
background-image: url(txtbg.jpg);
padding: 40px;
}

The background-image declaration is used to attach the background image to the <div>.
The padding declaration will add a 40px space between the text box perimeter and background perimieter.

Now we will create the second id:

#textbox {

width: auto;
height: 100px;
opacity: 0.8;
background-color: black;
padding: 10px;

}

Lastly we need to create a class, for the text that will be inside the text box.

.text {
color: white;
}

With our style sheet complete, we can create our divs.

The first <div> will reference id background. This <div> will contain the background image.

The second <div> will reference id textbox, which will contain the text.

The third <div> will contain the text.

With our divs created, let's preview this in our web browser.