Place background image in CSS

Place background image [background-position]

By default, a background image will be positioned in the top left corner of the screen. The property background-positionallows you to change this default and position the background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. 

However, all of them are formatted as a set of coordinates. For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window.

The table below gives some examples.

Value	Description	Example
background-position: 2cm 2cm	The image is positioned 2 cm from the left and 2 cm down the page	Show example
background-position: 50% 25%	The image is centrally positioned and one fourth down the page	Show example
background-position: top right	The image is positioned in the top-right corner of the page	Show example

The code example below positions the background image in the bottom right corner:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }