Css Background
The background color of the web page is by default white, with the help of css you can change the color of its background, in addition to display the image in the background, for this, use the background property, its 5 properties which are as follows
1 background-color
2 background-image
3 background-repeat
4 background-attachment
5 background-position
1 Background-color
To change the color of the background of the webpage, use this properties. To change the color, hex value of the color, RGBA value or color name is given, any value can be displayed in the background with the help of these values.
Syntax
Selector { Background - color: value; }
Example 1
|
<!DOCTYPE html> <html> <head> <title> </title> <style> body { background-color: red; } </style> </head> <body> </body> </html> |
Output
2 Background image property
The background of the webpage is white by default, use the background image property to display the image in its background, with the help of this property, any image can be displayed in the background of the web page horizontally and vertically in the background of the image web page. Repeat writes the image name with its extension (jpg, png, gif etc ..) to which the image is to be displayed in the web page and put the html file inside a folder.
Example 2
|
<!DOCTYPE html> <html> <head><title></title></head> <body style ="background-image: url(dummy_book_cover.png)"> </body> </html> |
Output
3 css background repeat
When using the background image property, the image in the web page is repeated horizontally and vertically.To control the image being repeated in the web page, use the background repeat property. This property has three values, which is as follows -
1 repeat-x: - Using repeat-x value, the image in the background of the web page is horizontally repeat.
2 repeat-y: - Using repeat-y value, the image in the background of the web page is vertically repeat.
Example 3
|
<!DOCTYPE html> <html> <head><title></title> <style> body { background-image: url("dummy_book_cover.png"); background-repeat: repeat-x; } </style> </head> <body> </body> </html> |
Output
3 no-repeat: - image in the background of the web page on using no-repeat value
Does not repeat.
Example 4
|
<!DOCTYPE html> <html> <head><title></title> <style> body { background-image: url("dummy_book_cover.png"); background-repeat: no-repeat; } </style> </head> <body> </body> </html> |
4 css background attachment
You cannot use the background attachment property alone; Use this property with the background image property. When used with the background image property, the image remains fixed even when scrolling the text / content of the web page.
Example 5
|
<!DOCTYPE html> <html> <head> <style> body { background-image: url("dummy_book_cover.png"); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <h1>background-image fixed</h1> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> </body> </html> |
5 css background position
Use the background position property to change the position of the image to be displayed in the web page. By default, the image in the background of the web page is top - left display. The value used in the background position property is as follows -
1 center
2 top
3 bottom
4 left
5 right
Example 6
|
<!DOCTYPE html> <html> <head><title></title> <style> body { background-image: url("dummy_book_cover.png"); background-repeat: no-repeat; background-position: right top; } </style> </head> <body> </body> </html> |
