CODEWITHSUNDEEP
htmlcssbackgroundcss-float
Hamza
Hamza

Reputation: 1085

CSS: I can't center the body content in the background image

I tried to add a background to the body of the website, and I wanted to show the full background, and center the content of the website inside it.

I used the following CSS, but can't center it:

body {
  margin: auto;
  background: url(../images/bggeneral.jpg) top center repeat;
  background-position: center;
  font-size: 100%;
  line-height: 1.0625em;
  color: #515151;
  width: 100%;
}

the background image : http://www.comicar.ma/assets/images/bggeneral.jpg

Do I need to crop the image or something like that?

Upvotes: 1

Views: 941

Answers (1)

Sowmya
Sowmya

Reputation: 26979

You can remove repeat if you dont want body image to be repeated. And margin:0 auto should be given to the container div.

HTML

<div class="wrapper">
Content
</div>​

CSS

body {background: url(http://www.comicar.ma/assets/images/bggeneral.jpg) top center no-repeat; font-size: 100%; line-height: 1.0625em; color: #515151; width: 100%; }
.wrapper{width:700px; margin:0 auto}

LIVE DEMO

Upvotes: 4

Related Questions