Mastering CSS Background Properties

CSS Background Properties

Backgrounds are one of the most important aspects of CSS. They can add color, texture, and overall look to your page. There are many different properties that can be used to set backgrounds in CSS. Let’s take a look at some of the most popular.

background-color

The background-color property sets the background color of a web page. This property accepts either a color name or color code. For example:

	background-color: red;
	background-color: #000000;

background-image

The background-image property sets an image as the background of a web page. This property accepts either a URL or an Image object. For example:

	background-image: url(myimage.jpg);
	background-image: new Image('myimage.jpg');

background-repeat

The background-repeat property sets how the background-image is repeated. This can be either ‘repeat’, ‘repeat-x’, ‘repeat-y’, or ‘no-repeat’. For example:

	background-repeat: repeat;
	background-repeat: repeat-x;
	background-repeat: repeat-y;
	background-repeat: no-repeat;

background-attachment

The background-attachment property sets whether the background-image scrolls with the page or is fixed, meaning it stays in place while the rest of the page scrolls. This property accepts either ‘scroll’ or ‘fixed’. For example:

	background-attachment: scroll;
	background-attachment: fixed;

background-position

The background-position property sets the position of the background-image. This property accepts either x and y coordinates, or keywords such as ‘top, ‘center’, ‘bottom’, ‘left’, ‘right’, etc. For example:

	background-position: 10px 20px;
	background-position: left top;
	background-position: center;

background

The background property is a shortcut for all the background properties above. It allows you to set all of the background properties in one line. For example:

	background: red url(myimage.jpg) repeat-x fixed 10px 20px;

These are just some of the most popular background properties available in CSS. There are many more to explore, so have fun experimenting!