CSS Body Background: Color, Image, Repeat, Position and Attachment

Use CSS on the HTML <body> element to control page-level backgrounds, spacing and other presentation. Modern pages should use CSS properties rather than old presentational HTML attributes.

Body margin Top ↑

Browsers normally provide a default body margin. Set it explicitly when the design should reach the viewport edge.

body { margin: 0; }

Top margin demo

Background color Top ↑

body {
  background-color: #f5f7fa;
}

Background image Top ↑

body {
  background-image: url("plus_logo.jpg");
}

By default a background image repeats. Use the related properties to control repetition, position and size.

Background image demo

background-repeat Top ↑

body {
  background-image: url("plus_logo.jpg");
  background-repeat: no-repeat;
}

Common values include repeat, no-repeat, repeat-x, repeat-y, space and round.

No-repeat demo repeat-x demo

background-position Top ↑

body {
  background-image: url("plus_logo.jpg");
  background-repeat: no-repeat;
  background-position: left center;
}

Position demo

background-attachment Top ↑

background-attachment: fixed keeps the background positioned relative to the viewport while the document content scrolls. It can behave differently in some mobile/browser situations, so test it rather than relying on it for essential information.

body {
  background: #f5f7fa url("plus_logo.jpg") no-repeat center center;
  background-attachment: fixed;
}

Fixed background demo

background-size Top ↑

Use cover when an image should fill the available background area and cropping is acceptable, or contain when the whole image should remain visible.

body {
  background-size: cover;
}

Frequently Asked Questions Top ↑

Should I use the old HTML background attribute?
No. Use CSS background-color, background-image and related properties.

Why does my background image repeat?
background-repeat defaults to repeating behavior. Set no-repeat when only one image is wanted.

How do I center a background?
Use background-position: center.

Can I set several background properties at once?
Yes. The background shorthand can combine color, image, position/size, repeat and attachment values.

Table background image Borders Heading CSS

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

vijay	26-08-2014
thank you so much sir.... nice explanation

CSS for the HTML Body: Backgrounds and Page Spacing