background-color
This property is used to set the background color of an element.
CSS snippet:
body{
background-color: #e1e1e1; /*light gray color*/
}
Output:
The background color of the page changes into light gray color.
background-image
This property is used to set an image as the background for an element.
CSS snippet:
body{
background-image: url(“sample-image.jpg”);
}
Output:
The mentioned image is set as the background of the page.
background-repeat
If a background is specified, this property is used to specify how the image should be repeated.
Applicable values
repeat
the background image is repeated both horizontally and vertically
repeat-x
the background image is repeated horizontally only
repeat-y
the background image is repeated vertically only
no-repeat
the image will not be repeated.
CSS Snippet:
body{
background-image: url(“sample-image.jpg”);
background-repeat : repeat-x;
}
Output:
The background image will be repeated horizontally if the image width is lesser than the page width.
background-attachment
If a background is specified, this property is used to specify whether
the background image should be fixed to the viewport (ie., even if you scroll the container, the background will be fixed)
or
the background image should scroll along with the container.
Applicable values
scroll (default value)
the background image scrolls when the container block gets scrolled.
fixed
the background image will be fixed to the viewport and does not scrolls with the container block
CSS Snippet:
body{
background-image: url(“sample-image.jpg”);
background-repeat : repeat-x;
background-attachment : fixed;
}
Output:
Scroll the page down. The image will be fixed to the viewport.
