-2

I have a background image of original size 1024 x 1024 pixel. How can I center the image on the page? I want to apply the image on the complete body. 

body {
  background-image:url('images/bg.jpg');
  height: 1024px;
  background-repeat: no-repeat;
}

I was thinking of giving a left and right margin in pixels, but thought if there is a better way out, that is more exact.

Suhail Gupta
  • 22,386
  • 64
  • 200
  • 328

2 Answers2

0

You mean : 

body { 
  background-image:url('images/bg.jpg') no-repeat center fixed; 
  -webkit-background-size: cover; /* for Chrome and Safari */
  -moz-background-size: cover; /* for Firefox */
  -o-background-size: cover; /* for Opera */
  background-size: cover; /* standard */
}

Code article on CSS Tricks

mpgn
  • 7,121
  • 9
  • 67
  • 100
  • and the text or fields that will get inserted inside the body. They won't automatically come over the image, as if it was the beginning of the page – Suhail Gupta Aug 20 '14 at 17:10
0

You can align the background image in the center by using:

body {
  background: url('images/bg.jpg') no-repeat center center;
  height: 1024px;
}
Bruno Toffolo
  • 1,504
  • 19
  • 24