I have a problem with the background-image property.
I want to insert the image of a film roll in the background of the div scena, but background-image:url(img/rullino.png); doesn't show anything.
When I write it inline with Firebug on Mozilla, then it works.
Someone understand why this happens?
/* tag */
body,html{
background-color: grey;
font-family: 'Existence Light', arial, sans-serif;
font-size: 1.8em;
height:100%;
}
p {
word-wrap:break-word;
}
/* ======= Generale sezioni ======= */
.sections{
min-height: 100%;
}
/* ======= Entry-section ======= */
#entry-logo img{
margin: 10% 0 0;
}
#entry-section #go-down{
margin-top: 9%;
text-align: center;
}
#entry-section i{
content:"\f078";
color:white;
}
/* ======= film-section ======= */
#film{
height:100%;
}
#film > .container{
height:100%;
padding:0;
margin:0;
width:100%;
}
.container > #rullino {
height:20%;
background-color:red;
}
body #film .container #rullino .scena {
background-image: url(img/rullino.png);
background-color: #00ff00;
background-repeat: no-repeat;
height:100%;
width:15%;
float:left;
}
#rullino img{
max-height:70%;
}
<body>
<section id="entry-section" class="sections">
<div class="container">
<div id="entry-logo">
<img src="img/logo.png" width="100%" alt="Un Autre Chien Andalou">
</div>
</div>
<div id="go-down">
<i class="fa fa-chevron-down"></i>
</div>
</section>
<section id="film" class="sections">
<div class="container">
<div id="rullino">
<div id="scena1" class="scena">
<p>scena1</p>
</div>
<div id="scena2" class="scena">
<p>scena2</p>
</div>
<div id="scena3" class="scena">
<p>scena3</p>
</div>
<div id="scena4" class="scena">
<p>scena4</p>
</div>
<div id="scena5" class="scena">
<p>scena5</p>
</div>
</div>
</div>
I tried your code with this image of a puppy, and it worked for me : "http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8.CB312176604.jpg".
So it seems like it could be your image path. Rather than "img/rullino.png", try "./img/rullino.png" or an absolute path to your image, so that it checks your current folder for the image.
Also, just a tip for readability + cleaner CSS - If you want the image as the bg of all the divs with the class '.scena' you'll only need to do this:
.scena {
background-image: url(img/rullino.png);
background-color: #00ff00;
background-repeat: no-repeat;
height:100%;
width:15%;
float:left;
}
Hope this helps!
Related
I am trying to create a round profile pic on a background image. I want the profile pic to be responsive and change size or maintain at an ideal position when switching from different screens.
Currently, I am using margin with fixed values to offset the position, but I don't think it is the right way. Please look at the following output. Even at code snippet all the alignment is off. I am not sure how do I actually code the width and height so that it will maintain at an ideal position on all screens. How to really set the margins or padding? I have tried col-sm and col-md with different parameters but it only takes col-md.
My ideal output is as follow:
iPhone X (The positioning of the profile pic and wordings are ok with the current code)
iPad (The positioning is OFF)
iPhone5/SE The position is OFF again
I have included JSFiddle, please help.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>
This might help you.. In order to make it more responsive use media queries..
To round an image use border-radius:50%; and also specify the width and height of the image.
.user{border-radius:75%; width:100px; height:100px;}
.name, .pic{float:left;}
.prof{width:300px; position:absolute; bottom:-35px; left:4%;}
.name{padding:25px 10px;}
#sfitness{position:relative;}
.name span{display:block; text-transform:none; font-size:16px;}
.name p{text-transform:uppercase; font-size:18px;}
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-8 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
</div></div>
</body>
Here is the updated code as you said it will be responsive I think you are also using bootstrap I updated the class and rewrite some CSS
you can check .user,.information, .information p class information is a new calss
* {
box-sizing: border-box;
font-family: Arial;
font-size: 12px;
}
img {
width: 100%;
}
.profile-name {
text-align: left;
font-size: 12px;
font-weight: bold;
margin-top: 5%
}
.user {
display: inline-block;
width: 80px;
height: 80px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
object-fit: cover;
float: right;
}
p {
display: flex;
flex-direction: column;
}
.information {
line-height: 16px;
margin-top: 20px;
}
.information p {
font-size: 152%;
font-weight: bold;
line-height: 19px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row" style="margin-top:-60px">
<div class="col-xs-4 col-sm-6 col-lg-1">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-xs-6 col-sm-8 col-lg-10 information">
<div class="row">
<p>Jane Worng<span>How are you</span></p>
</div>
</div>
</div>
</body>
Take use of Media Queries for the repsonsive aspect. Its way easier than doing it in javaScript:
body{
background-color: white;
}
#media only screen and (max-width: 750px) {
body {
background-color: black;
}
}
In this example the background-color of the body is white as long as the screen width is 750px or more.
I'm buliding a website in Asp.net MVC. A beginner with the bootstrap framework - Im trying to make my project responsive to mobile and tab devices. But the text in my containers seems to be overlapping for small size devices. This is my code.
Index.cshtml
<div class="feature">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4" id="left">
<img class="img-responsive" src="~/Content/Images/health/ayurveda7.jpg" />
</div>
<div class="col-xs-12 col-sm-12 col-md-4" id="middle">
<h1>Ayurveda - Harmony of <span>Mind, Body</span> and <span>Soul</span>.</h1>
<p>
Sprouted in the pristine land of India some 5000 years ago, Ayurveda, the science of life and longevity,
is the oldest healthcare system in the world and it combines the profound thoughts of medicine and philosophy.
Since then Ayurveda has stood for the wholesome physical, mental and spiritual growth of humanity around the world.
Today, it's a unique, indispensable branch of medicine, a complete naturalistic system that depends on the diagnosis
of your body's humours - vata, pitta and kapha - to achieve the right balance.
</p>
#*Rejuvenate*#
<button class="btn btn-default">
#Html.ActionLink("Rejuvenate", "Health")
</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<img class="img-responsive" src="~/Content/Images/health/ayurveda5.jpg" />
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="video-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 hidden-sm hidden-xs">
<iframe id="player" width="800" height="480"
src="https://www.youtube.com/embed/jlEYu--6T14? rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&playlist=jlEYu--6T14"
frameborder="0" allowfullscreen></iframe>
<script>
#*To mute the video*#
#*To load the youtube player api asynchronously*#
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
//height: '390',
//width: '640',
//videoId: 'jlEYu--6T14',
events: {
'onReady': onPlayerReady,
//'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
//player.mute();
}
</script>
</div>
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="content">
<br />
<h1>Culture,Festivals and Art Forms</h1>
<p>
Gifted with some of the unique classical Dances, art form and festivals, Kerala is said to have a cultural history that dates
back to a thousand years.
The land known for the pooram festivals is also blessed with unique art forms like Theyyam, Kutiyattam and Patayani.
</p>
<p>
Festivals are true celebrations in God's Own Country; occasions when grandeur prevails over the characteristic simplicity
of the Kerala lifestyle. Be it the state festival of Onam or the one at a local place of worship, faboulous attire and sumptuous
feasts are a must for the celebrations.
</p>
<p>
Besides being occasions for merry-making, festivals of Kerala have traditionally been preservers of the art and culture
of this land. Whether religious or social, traditional or modern, a festival here is never complete without an art event
which would range from the 2000-year-old Kutiyattam to contemporary stage shows.
</p>
<p>
<button class="btn btn-default">
#Html.ActionLink("Celebrate", "Festivals")
</button>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
/*footer*/
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Promoting Kerala</h3>
Trivandrum, Kerala - 695003<br />
India
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Travel Information</h3>
<ul>
<li>#Html.ActionLink("How to reach", "Reach")</li>
<li>#Html.ActionLink("Visa on Arrival", "Visa")</li>
<li>#Html.ActionLink("Travel Tips", "TravelTips")</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Share</h3>
<img src="~/Content/Images/backgrd/facebook.jpg" />
<img src="~/Content/Images/backgrd/twitter.jpg" />
</div>
</div>
<p id="copy">© xyz</p>
</div>
</footer>
style.css
/*****************************************Feature*********************Ayurveda************/
.feature .container{
height:350px;
background: url(/Content/Images/backgrd/bg-ayur12.jpg) no-repeat center center;
background-size: cover;
}
.feature .col{
width:30%;
float:left;
padding:10px;
margin-right:42px;
margin-left:25px;
color:#7b278e;
}
#left img{
padding-left:15px;
}
#middle{
margin:auto;
background: url(/Content/Images/backgrd/bg-ayur4.jpg) no-repeat center center;
background-size: cover;
height:350px;
}
.feature span{
font-family:'Great Vibes',cursive;
}
.feature .row img{
height:350px;
width:400px;
}
#middle .btn {
background: transparent;
border:1px solid #7b278e;
text-align:center;
margin-left:138px;
-moz-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
#middle .btn a{
color:#7b278e;
text-decoration:none;
}
#middle .btn:hover{
border:1px solid #7b278e;
box-shadow:3px 3px 6px #7b278e;
font-weight:600;
/*box-shadow: 0 1px 6px #7b278e;/*rgba(0, 0, 0, 0.6);*/*/
}
.clearfix{
clear:both;
}
/*****************Video Section****************Art, Festivals***************/
.video-section {
margin-top: 60px;
}
#player{
margin-left:10px;
float:left;
padding-right:10px;
}
.video-section iframe{
margin:auto;
}
.video-section .content{
height:480px;
border:1px solid green;
background: url(/Content/Images/backgrd/bg-art2.jpg) no-repeat center center;
background-size: cover;
margin-left:10px;
}
.video-section .content h1{
color:#f2f2f2;
padding-left:10px;
}
.video-section .content p{
color:#f2f2f2;
padding-left:10px;
}
.video-section .content .btn{
background: transparent;
border:1px solid #f2f2f2;
text-align:center;
margin-right:50px;
-moz-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
.video-section .content .btn a{
color:#f2f2f2;
text-decoration:none;
}
.video-section .content .btn:hover{
border:1px solid #f2f2f2;
box-shadow: 0 1px 6px #f2f2f2;
font-weight:600;
}
/**********************Footer************/
footer{
width:100%;
background-color:#CC0000;
color:#f2f2f2;
}
footer h3 {
font-weight:700;
font-size:16px;
}
footer .col{
margin-left:15px;
border:1px solid blue;
}
footer img{
height:8px;
width:8px;
}
footer .row ul{
list-style:none;
}
footer .row li{
padding-bottom:0;
margin-bottom:0;
}
footer .row li a{
text-decoration:none;
color:#f2f2f2;
}
footer .row li a:hover{
font-weight:700;
}
footer .row img{
height:30px;
width:30px;
margin-right:10px;
}
#copy{
float:right;
margin-right:10px;
margin-bottom:5px;
color:#f2f2f2;
}
#media(max-width: 750px){
.btn{
margin:auto;
}
.container{
margin-top:10px;
}
}
The .video-section and .footer containers are overlapping with the .feature container.
[This is how it looks on medium devices][1]
[This is how it looks in mobile][2]
Update:
#Miguel Leite: Thanku so much for the suggestion. It has helped.
Ive changed the code like this:
index.html
<div class="video-section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7" id="video-content">
But still the beginning of the video-section container is overlapping with the feature container.
Mobile view after edit
Could i get the video-section container to start only below the feature container?
You need to add the class .container to your .video-section element, or wrap the .row into a .container element.
Two solutions:
<div class="video-section">
<div class="container">
<div class="row">
(...)
</div>
</div>
</div>
or:
<div class="video-section container">
<div class="row">
(...)
</div>
</div>
That should get it fixed :)
A part of the problem that I can see is that you're giving your columns the same amount of space to take up on mobile devices. Try adjust the column sizes for small and extra small devices.
I have this template that we have been given to edit, all I want it to insert a top header div with a height of 25px and background colour, which I did, but it won't align correctly at all. I took it outside the wrapper, and increased it's width, but it still aligns slightly right.
I've added the original template below -
<head>
<title>[DOCUMENT_TITLE]</title>
</head>
<body>
<div id="pdfdoc">
<div id="wrapper">
<div id="header">
<div id="logo"><center><img src="[LOGOFILE]"></center></div>
<div class="sender-address">
<div class="sender-address-company">[SENDER_ADDRESS_COMPANY]</div>
<div class="sender-address-line1">[SENDER_ADDRESS_LINE1]</div>
<div class="sender-address-line2">[SENDER_ADDRESS_LINE2]</div>
<div class="sender-address-line3">[SENDER_ADDRESS_LINE3]</div>
<div class="sender-address-line4">[SENDER_ADDRESS_LINE4]</div>
<div class="sender-address-postcode sender-address-line4">, </div>
<div class="sender-address-postcode">[SENDER_ADDRESS_POSTCODE]</div>
</div>
<div id="header-info">
<div id="vat-registration-info">[VATNUMINFO]</div>
<div class="sender-address-phone">T: [SENDER_ADDRESS_PHONE]</div>
<div class="sender-address-email">E: [SENDER_ADDRESS_EMAIL]</div>
</div>
<div class="cl" id="logo_clearer"></div>
</div>
</div>
</body>
</html>
CSS
html {width:793px;}
*,html,body{ font-family:[FONT]; color:[FONTCOLOR]; }
body {
font-size:[FONTSIZE]px;
}
#wrapper {
margin:0 40px 0 40px;
}
#pdfdoc {
font-size:1.1em /*increase font size for everthing from user-set body pt size */
}
/* header */
#pdfdoc #header{
margin-top:2em;
border-bottom:1px solid #E5E5E5;
padding-bottom:24px;
margin-bottom:48px;
position:relative;
}
#logo{
float:left;
margin-right:24px;
margin-left:24px;
text-align:center;
vertical-align: middle;
}
.sender-address {
font-size:1.1em;
float:left;
}
.sender-address-company{ font-weight:bold;font-size:1.1em;}
.sender-address-line4{ float:left;}
.sender-address-potcode{ float:left;}
#header-info{
float:right;
text-align:right;
position:absolute;
bottom:0; right:0;
margin-bottom:24px;
}
#header-info div{ color:#808080; }
#pdfdoc #header div a:link{ text-decoration:none; color:#808080;}
How can I get the added Div centrally aligned in template?
http://jsfiddle.net/5RhFq/16/ - looks fine on here but on here - https://app.kashflow.com/v2/documents/invoice/89BAFB30-CF7C-4A14-98C3-37BD6D8C14CC?media=0&theme=396345 It doesn't.
body {
margin:70px auto;
font-size:[FONTSIZE]px;
}
I'm working on an app for Windows 8 written in HTML, CSS, and JavaScript. I'm struggling with the CSS formatting part. I was able to get my app formated so it appears the way I want it to look somewhat but I would like to know how I can cleanup my CSS? I "Googled" and experimented until I got the layout I wanted but I would like to know the right, preferred way to format with CSS?
Below is my code:
<style type="text/css">
.quiz p {
margin-left: 120px;
}
.quizDiv2 {
margin-top: 220px;
width: 320px;
margin-left: auto;
margin-right: auto;
}
.cenDiv {
text-align: center ;
}
.cenDiv2 {
text-align: center ;
font-size:250%;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
.alignleft2 {
float: left;
}
.alignright2 {
float: right;
}
.container {
width:320px;
}
.first,
.second {
width:100%;
text-align:right;
display:table;
font-size:250%;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:100%;
text-align:right;
border-top:2px solid black;
border-color:black;
}
.correct {
font-size:250%;
}
</style>
</head>
<body>
<div class="quizDiv2">
<div id="textbox">
<p class="alignleft" id="statQuestionDiv">1/10</p>
<p class="aligncenter" id="statTimerDiv">02:27</p>
<p class="alignright" id="statScoreDiv">100%</p>
</div>
<div style="clear: both;"></div>
<div class="container">
<div class="first" id="mathProblemDiv1">1,483</div>
<div class="second">
<div class="plus">+</div>
<div class="number" id="mathProblemDiv2">4,573</div>
</div>
<div class="third">
<div class="result"></div>
</div>
</div>
<div class="cenDiv">
<!-- Fill in the blank div -->
<div id="fillBlankDiv">
<input id="userAnswer" type="text" />
<p>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
</p>
<p>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
</p>
<p>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
</p>
<p>
<button id="btn0">0</button>
<button id="btnNeg">+/-</button>
<button id="btnOk">OK</button>
</p>
</div>
</div>
<div class="cenDiv2">
<div id="checkDiv">CORRECT!</div>
</div>
</div>
</body>
</html>
You can use this easy CSS Cleaner. This site is amazing and will be great for cleaning up future css styles.
You can just copy and paste your styles in the CSS Input and select the size of the output. I recommend High.
http://www.cleancss.com/
Hope this helps!
Here is your code after cleaned up:
<style>
.quiz p{margin-left:120px;}
.quizDiv2{margin-top:220px;width:320px;margin-left:auto;margin-right:auto;}
.cenDiv{text-align:center;}
.cenDiv2{text-align:center;font-size:250%;}
.alignleft{float:left;width:33.33333%;text-align:left;}
.aligncenter{float:left;width:33.33333%;text-align:center;}
.alignright{float:left;width:33.33333%;text-align:right;}
.alignleft2{float:left;}
.alignright2{float:right;}
.container{width:320px;}
.first,.second{width:100%;text-align:right;display:table;font-size:250%;}
.plus{width:auto;float:left;}
.number{width:auto;float:right;}
.third{width:100%;text-align:right;border-top:2px solid #000;border-color:#000;}
.correct{font-size:250%;}
</style>
UPDATE: For best practices in css, If you have a style you are going to be using similar styles a good bit. For example text-aligning and font-sizes, and Columns. Make class in your css like this:
.onethird { width:33.33333%; }
.alignleft { text-align:left; }
.aligncenter { text-align:center; }
.alignright { text-align:right; }
.largefont { font-size:250%; font-family: arial,tahoma; font-weight:normal;}
Then on your html just add the classes, for example:
<div class="container">
<div class="first alignleft onethird">
</div>
<div class="second aligncenter onethird">
</div>
<div class="third alignright onethird">
</div>
</div>
That way use can apply the styles that you use over and over without having to add the to each css class. And then if you want to change a specific one, be more specific in calling your css and it will override the default styles. For example:
.container .onethird { width:100%; }
will override .onethird { width:33.33333%; }
This is how I work in css, and its helped me so much. Hope this helps!
i am i am new in CSS.. i have converted my psd file into html/css.. now i want to move my webpage page into center of the window.. i tried some code and that code align only text the background image "back.gif" remains at left.. here is my html and CSS code"
**HTML**
<body>
<div id="main">
<div id="header">
<div id="logo">
<img src="logo.gif" />
</div>
</div>
<div id="menu">
<img src="images/menu_07.gif" />
<div id="m">
<ul>
<li> Home</li>
<li> Pages</li>
<li> Donor</li>
<li>Seeker</li>
<li>Hospitals</li>
<li>Life Saving Contacts</li>
<li>Feedback</li>
</ul>
</div>
</div>
<div id="content">
<div id="center" align="center">
<h3>WELCOME TO ADMIN AREA</h3>
<p id="ajk">AJKBLOODBANK.COM</p>
<?php
echo "welcome!".$_SESSION['username'];
echo "<br>";
echo "<a href=logout.php>Logout</a> ";
?>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
**CSS**
body
{
background:url(../back.gif) repeat-y;
padding-left:105px;
height:900px;
text-align: center;
margin:auto;
min-width: 760px;
}
div#main
{
width: 720px;
margin: 0 auto;
text-align: left;
}
#header
{
width:787px;
margin-top:10px;
}
#menu
{
width:787px;
float:left;
margin-top:20px;
}
#content
{
background-color:#FFF;
border:groove;
width:790px;
float:left;
padding-top:30px;
margin-top:30px;
}
#footer
{
float:left;
height:52px;
width:790px;
}
Please tell me where i made mistake ..
the diameseion of background image "backgif" = 995x1000
Whichever element you want centered - set an explicit width and then set left/right margins to auto
#main { width:995px; margin:0 auto; }
...this will center the element in its parent. If you were to center #main, it would be centered on the page (assuming your body has 100% width)
EDIT
Try making your background image apply to #main instead of body. Or, center the background image using background-position, or shorthand:
body { background:url(../back.gif) repeat-y center top; }
Cheers
To center the body element, I would use something similar to this:
.body {
width: 940px;
margin-left: auto;
margin-right: auto;
}