Background Position

selector {

background-position: left top;

//other options

left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

}

Background Sizes

#selector {

//change values to:

background-size:400px 300px;
background-size:50%;
background-size:100% 100%;
background-size:cover;
background-size:contain;

}

FontAwesome in Background Image

#Markup

<div class='input-container'>
<div class="icon-ph"><i class="icon-envelope"></i></div>
<input class="custom-text" type="text" placeholder="Email address">
</div>

#CSS

.icon-ph {
display: inline-block;
width: auto;
height: auto;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
background-color: #eeeeee;
position:absolute;
left:3px;
top:3px;
bottom:3px;
z-index:3;
}

.custom-text {
padding:6px 6px 6px 30px ;
}

.input-container {
position:relative;
}

Image Background Using Position

#bg {

  position: fixed;
  top: 0;
  left: 0;
   
  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;

}

Background Image Size

html { 

  background: url(images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 
}

Background Shorthand Notation

element {

  background:

    #fff

    url(image.png)

    no-repeat

    20px 100px

    fixed;

}


element {

  background-color: color || #hex || (rgb / % || 0-255);

  background-image:url(URI);

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

  background-position: X Y || (top||bottom||center) (left||right||center);

  background-attachment: scroll || fixed;

}

Setting Background image

selector { 

   width:100%;
   height:100%;
   background:url(logo.png) center center no-repeat;

}