CODEWITHSUNDEEP
htmlcssbackground
Amar H-V
Amar H-V

Reputation: 1336

Body and Background sections separate using CSS

How do I separate the body/content area of my site from the background using CSS. To show you what I mean, just see the attached picture. So, the background on the sides will expand to people with really big monitors, but the content are will always stay the same size.

Thanks, Amar

https://i.sstatic.net/Lavnv.jpg

Upvotes: 0

Views: 3842

Answers (5)

Tio Felix
Tio Felix

Reputation: 152

If i understood your question correctly, what you seek is a wrapper.

Put the background image on the body, and then, use a div with this css rule for the content:

.wrapper {
  width: 960px;
  margin: 0 auto;
}

You can use it in html like this:

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

The WIDTH value must be the exactly size you want for your "content box" and the margin property just centralize it no matter the size of the monitor.

Upvotes: 0

legiero
legiero

Reputation: 374

body {
  background-color: #f0e0af;
  text-align: center;
}
.container {
  background-color: #fbf6e2;
  width: 1000px;
  margin: 0 auto;
}

.container is a div.

Upvotes: 0

Dennis Traub
Dennis Traub

Reputation: 51634

#content {
  width:600px; 
  margin: 0 auto;
}   

<div id="content">
    Your content goes here
</div>

Upvotes: 0

Frexuz
Frexuz

Reputation: 4933

Try this.

body {
  background: #000;
  padding: 50px;
}

#content {
  width: 960px;
  background: #fff;
}

Upvotes: 1

Manse
Manse

Reputation: 38147

use the following CSS :

content {
  width: 980px; // or your desired width
  margin: 0 auto; // horizontally center it
}

Example http://jsfiddle.net/SsPGS/

Upvotes: 0

Related Questions