Center graphic on page

HTML & CSS
1

HI Folks,

I have a mock up design consisting of 3 images:

A background repeater, a background for the wrapper, and a main image within the div to align with the background.

I can’t center the main image, can anyone please help?

http://www.blackcountry.nhs.uk/sample/

Thanks

2

Hi,

Currently your css looks like this:

#wrapper {
  background-image: url(mainback.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 1440px;
  height: 2095px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

Change it to:

#wrapper {
  background-image: url(mainback.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 1440px;
  height: 2095px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
}
3

To center the image, you could just do

#wrapper {
  text-align: center;
}

… but that won’t get you very far, as a site is not an image. :slight_smile:

4

Thanks guys