 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-27.
In our previous lesson, we have seen how to style links using CSS properties.
Today we will study CSS background property. We will learn how to apply background to a web page using CSS properties.
CSS background property
CSS background properties are used to apply background color or a background image to any element in a web page or to a web page itself. Other related properties in CSS include background attachment, background position, background repeat, and so on.CSS background color property
This property is used to apply a background color to an element in a web page. We can also use this property to apply background color to a web page.
Let us use this in our script and see how it works.
Open a new Notepad file. In this copy code from lesson-26. Insert following lines in the style.
body {
background-color: #FFD700;
}
We have applied color to the body element. Therefore the background color will be applied to whole web page.
Save this file as "Lesson-27-1" and "Lesson-27-1.html". Click on the following figure for PDF file of source code.
 |
| Figure 27-1. CSS background color property |
See the output. We can see color that we specified is displayed in the background. Click on Figure 27-2 to see output in a web page.
 |
| Figure 27-2. CSS background color property |
In the similar manner, we can apply background to any element like <h1>, <p>, or <div>
CSS background image property
This property is used to display an image in the background of a web page. Let us write code for this in our script.Open a new Notepad file and copy all code from lesson-27-1. Delete following lines from this code. This is the style we used for applying background-color.
body {
background-color: #FFD700;
}
Now insert following code in the style.
body {
background-image: url("Image for Lesson-27-02.jpg");
}
In the background-image property we have mentioned the name of image file to be displayed in the background.
Save this file as "Lesson-27-02" and Lesson-27-02.html". Click on the following figure for PDF file of source code.
 |
| Figure 27-3. CSS background image property |
We have used the image file "Image for Lesson-27-2.jpg" in our example. Now double click on HTML document and see the output. Click on the following figure to see actual output in a web page.
 |
| Figure 27-4. CSS background image property |
We can see the image in background of web page. You can change the name of image file and display any image of your choice.
CSS background-repeat property
This property specifies how to repeat the background image. This has two values namely 1. repeat-x and 2. repeat y.background-repeat: repeat-x;
is used to repeat image horizontally and
background-repeat: repeat-y;
is used to repeat image vertically.
CSS background-position property
This property is used to specify position of image to be displayed in the web page. This property has values like values right top, right center, right bottom, center top, left top, left bottom, center bottom.
CSS background-attachment property
Attachment property is used to specify whether image should remain attached a position in a web page or not. If we give value "fixed" then it remains at a fixed position and does not move when the page is scrolled. If the value "scroll" is given then the background image will also scroll as the page is scrolled.CSS background property
We can use a single background property to specify many background properties. It's syntax is as follows:background: color, image name, position
CSS gradients
We can apply a gradient background to a web page. We need to specify at least two color stops for this. Syntax of this property is as follows:
background: linear-gradient(direction, color1, color2, ....)
We can specify more than two colors in this property.
There are two types of gradients namely linear and radial. We can write:
linear-gradient()
or
radial-gradient()
For repeating the gradient we write:
repeating-linear-gradient()
or
repeating-radial-gradient()
Now let us write gradient in our script. Open a new Notepad file and copy all code from lesson-27-2. Delete previously written style for background image and write following in place of it.
background: linear-gradient(to left, red, green)
Save this file as "Lesson-27-3" and "Lesson-27-3.html". Click on the following figure for PDF file of source code.
 |
| Figure 27-5. CSS background gradient |
Now double click on the HTML file and see the output. Click on the following figure to see actual output in a web page.
 |
| Figure 27-6. CSS background gradient |
We have mentioned two colors namely red and green here.
Try writing codes for various possibilities like giving more than two colors, using radial gradient, changing direction and so on and see the output. This will be very interesting.
Important Points:
1. CSS background property is used to apply background to a web page.2. CSS background-color property is used to apply background color to a web page.
3. CSS background-image is used to display an image in the background of a web page.
4. We can also display color gradient in the background.
Lesson-26 Lesson-28
