The background effects for web pages can range from plain colors to attractive images. All having a specific purpose or thought behind them. CSS background properties can be also be used for the same purpose. Depending upon the type of background required, there are various background effects that we’ll discuss in this section.
Background Color
The name itself suggests the plain and simple purpose for this property.
The background-color property can be used to provide different colors to the background.
The background-image: url(“image.png”); takes image path or image url to show in background
The sample code for the same goes like:
1 2 3 | body{ background-color: wheat; } |
The complete example is
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <style> body { background-color: wheat; } </style> </head> <body> <h1>CSS background-color property</h1> <p>background-color property is used to set background color.</p> </body> </html> |
The value for the background-color property can be any known CSS color-name, hex code or RGB code.
Color names can be specified like black, white, green, pink, orange, yellow, red etc.
Hex code are six-digit hexadecimal color code followed by # symbol like #000000, #ffffff, #FFFF00 etc.
RGB code is (r,g,b) combination of color between 0 and 255 like (245,222,179) for wheat.
Background Image
Here, instead of color we can have and image file as the web-page background.
The sample code for this is as follows:
1 2 3 | body { background-image: url("image.png"); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <style> body { background-image: url("http://ebhor.com/examples/images/pexels-photo-1193743.jpeg"); } </style> </head> <body> <h1>CSS background-imagee property</h1> <p>background-image property is used to set background image.</p> </body> </html> |