Skip to main content

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

There are 5 CSS background properties that affects the HTML elements:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
  6. background (shorthand property)

1. CSS background-color​

The background-color property is used to specify the background color of the element.

You can set the background color like this:

<!DOCTYPE html>  
<html>  
	<head>  
		<style>  
			h2,p{  
			    background-color: #b0d4de;  
			}  
		</style>  
	</head>  
	<body>  
		<h2>My first CSS page.</h2>  
		<p>Hello World! This is an example of CSS background-color.</p>  
	</body>  
</html>

Output:

Background-color example

2. CSS background-image​

The background-image property is used to set an image as a background of an element.

By default, the image covers the entire element. You can set the background image for a page like this.

<!DOCTYPE html>  
<html>  
	<head>  
		<style>  
			body {  
				background-image: url("my-image.jpg");  
				margin-left:100px;  
			}  
		</style>  
	</head>  
	<body>  
		<h1>Hello Javatpoint.com</h1>  
	</body>  
</html>
note

When using a background image, use an image that does not disturb the text.

The background image can also be set for specific elements, like the <p> element:

p {  
	background-image:  url("my-image.gif");  
}

3. CSS background-repeat​

By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

<!DOCTYPE html>  
<html>  
	<head>  
		<style>  
		body {  
		    background-image: url("my-image.png");  
		    background-repeat: repeat-x;  
		}  
		</style>  
	</head>  
	<body>  
		<h1>Hello World!</h1>  
	</body>  
</html>

background-repeat: repeat-y;

<!DOCTYPE html>  
<html>  
	<head>  
		<style>  
		body {  
		    background-image: url("my-image.png");  
		    background-repeat: repeat-y;  
		}  
		</style>  
	</head>  
	<body>  
		<h1>Hello World!</h1>  
	</body>  
</html>

background-repeat: no-repeat;

<!DOCTYPE html>  
<html>  
	<head>  
		<style>  
		body {  
		    background-image: url("my-image.png");  
		    background-repeat: no-repeat;  
		}  
		</style>  
	</head>  
	<body>  
		<h1>Hello World!</h1>  
	</body>  
</html>

4. CSS background-attachment​

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example: Specify that the background image should be fixed:

body {  
	background-image:  url("my-image.png");  
	background-repeat:  no-repeat;  
	background-position:  right top;  
	background-attachment:  fixed;  
}

Example: Specify that the background image should scroll with the rest of the page:

body {  
	background-image:  url("my-image.png");  
	background-repeat:  no-repeat;  
	background-position:  right top;  
	background-attachment:  scroll;  
}

5. CSS background-position​

The background-position property is used to specify the position of the background image.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right
body {  
	background: white url('good-morning.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
}

6. CSS background - Shorthand property​

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Instead of writing:

body {  
	background-color:  #ffffff;  
	background-image:  url("my-image.png");  
	background-repeat:  no-repeat;  
	background-position:  right top;  
}

You can use the shorthand property background:

body {  
	background:  #ffffff url("my-image.png") no-repeat right top;  
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.

Table of Contents