
DESCRIPTION
CSS background property allows us to specify background effects on an element.
There are 5 background properties that affects an HTML element –
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background-Color
Background-color property specifies the background color of an element.
Example –
<!DOCTYPE html> <html> <head> <style> h2 , p { background-color: #b0d4de; } </style> </head> <body> <h2>Hello Monks.</h2> <p>Hello HtmlCssMonk. This is an example of CSS background-color.</p> </body> </html>
This Code will produce the following result on your webpage –

Background-Image
Background-image property is used to set an image as the background of an element.
Example –
<!DOCTYPE html> <html> <head> <style> body { background-image: url("blur.jpg"); margin-left: 80px; } </style> </head> <body> <h1>HtmlCssMonk</h1> <h2>Learn like a Monk</h2> </body> </html>
This Code will produce the following result on your webpage –

Note – When using a background image, use an image that does not disturb the text.
Background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Example –
<!DOCTYPE html> <html> <head> <style> body { background-image: url("hcm.png"); background-repeat: repeat-x; } </style> </head> <body> </body> </html>
repeat-x repeats the image only horizontally.
This Code will produce the following result on your webpage –

NOTE – repeat-y repeats the image only vertically.
Background-Attachment
Background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window.
Example –
To make background Image fixed ( will not scroll with the rest of the page ) –
body { background-image: url("animal.png"); background-repeat: no-repeat; background-attachment: fixed; }
To make background Image scroll with rest of the page –
body { background-image: url("animal.png"); background-repeat: no-repeat; background-attachment: scroll; }
Background-Position
Background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.
Example –
<!DOCTYPE html> <html> <head> <style> body { background-image: url("hcm.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } </style> </head> <body> </body> </html>
This Code will produce the following result on your webpage –

Next topic – Positions in CSS
Previous topic – Borders in CSS