CSS BACKGROUNDS
The css background properties are used to add background effects for Html element.
we will learn about the following css background properties.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- shorthand property (background)
<! DOCTYPE html> <html> <head> <style> body { background-color: red; } </style> </head> <body> <h1>Hello background-color!</h1> <p> Red background color</p> </body> </html> |
<! DOCTYPE html> <html> <head> <style> body { background-color: red; opacity: 0.3; } </style> </head> <body> <h1>Hello background-color!</h1> </body> </html> |
<! DOCTYPE html> <html> <head> <style> body { background-image: url("image.jpg"); } </style> </head> <body> <h1>Hello background-image!</h1> </body> </html> |
CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
background repeat: the background image only once is also specified by the background-repeat property:
syntax:
<! DOCTYPE html> <html> <head> <style> body { background-image: url("image.jpg"); background-repeat: no repeat/ repeat-x/ repeat-y; } </style> </head> <body> <h1>Hello background-image!</h1> </body> </html> |
CSS background-position
Then background-position property is used to specify the position of the background image.
syntax:
<! DOCTYPE html> <html> <head> <style> body { background-image: url("image.jpg"); background-repeat: no repeat; background-position: center/ left /right / center-top / center-bottom; background-position-x: center / left / right; background-position-y: center / left / right; } </style> </head> <body> <h1>Hello background-image!</h1> </body> </html> |
CSS background-attachment
The background-attachment property specifies whether the background image should scroll or be fixed.
syntax:
<! DOCTYPE html> <html> <head> <style> body { background-image: url("image.jpg"); background-repeat: no repeat; background-position: center; background-attachment: scroll / fixed; } </style> </head> <body> <h1>Hello background-image!</h1> </body> </html> |