How to center align image in

[douglas.shrader.1]

I can't seem to center align my background image. I am new to php, css, and java coding but finding it necessary in this day and age. Here is the code. I hope this will help.

 <style>
body{ background: url(http://dsninformation.com/images/magic.jpg); background-repeat: no-repeat }
.button {
display : inline-block;
cursor : pointer;
border-radius:10px;
padding : 20px 60px;
color : #fff;
border:1px solid #ddd;
font-size:30px;
line-height:40px;
font-family: 'Oswald', sans-serif;
text-decoration : none;
}
.button.green {
background: #df3535; /* Old browsers */
background: -moz-linear-gradient(top, #df3535 1%, #9b0606 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#df3535), color-stop(100%,#9b0606)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #df3535 1%,#9b0606 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #df3535 1%,#9b0606 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #df3535 1%,#9b0606 100%); /* IE10+ */
background: linear-gradient(to bottom, #df3535 1%,#9b0606 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df3535', endColorstr='#9b0606',GradientType=0 ); /* IE6-9 */
}
#mainForm {
left: 785px;
position: absolute;
top: 640px;
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake,.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.shake {
display:inline-block
}
.red{color:red;}
input[type=text]{
margin-top:10px;width:350px;font-size:18px;height:40px;border:1px solid #ddd;background:#fff;padding-left:5px;
}
#heading{
font-size:30px;
font-weight:bold;
font-family:"Myriad Pro";
width:450px;
text-align:center;
margin:100px auto 0;
}
#info{
width:460px;
font-size:16px;
font-weight:bold;
text-align:center;
margin:15px auto 0;
}
#Table_01 tr td #heading {
color: #FF0;
}
#Table_01 tr td #heading {
color: #F00;
}
  </style>

I would really appreciate any help getting this image center align

[PsychicTide]

Might help... http://www.w3schools.com/cssref/pr_background-position.asp

If not, then it would help to get a link to the site for investigation.

[douglas.shrader.1]

thank you for the post PsychicTide, But, I think I have bigger problems because I can get it all aligned perfect for the resolution on my conputer but, not on all computer resolution.

Does anyone have a cure for this? This is were you can see the page http://dsninformation.com/stop/magicgirlv2.php This si a screenshot of what it looks like on my page http://screencast.com/t/oWJ4ZNHviv

Any and alll help is more than appreciated.

Kindly
Doug

[JorgeM]

Seems to be centered on the screen just fine. Where/what resolution do you seem to be having a problem with?

[edit]... i see that you are reffering to the form now...that didnt load before so I saw your image centered...be back..

Ok, I'm back...

first, as I recommened to you in a previous similar thread, you should consider moving away from using table and deprecated elements and properties. Also, your image is too big and rather than assigning it as a background image to the body element, you may consider doing that to a div that is centered on the screen or as I did in my example below, just add an image element.

Take a look at this sample, as it may help guide you to a final solution.

Regarding your image being too big, I downloaded your image and cropped it to a smaller size. this way it will fit on all modern resolutions.

<!DOCTYPE html>
<html>
<head><title>MagicGrab</title>
<style>
#main {width:757px;margin: 0 auto;position:relative;}
#mainForm {position:absolute;bottom:-150px;left:200px;}
#mainFormSubmitButton {margin-top:10px;}

.button {
display : inline-block;
cursor : pointer;
border-radius:10px;
padding : 20px 60px;
color : #fff;
border:1px solid #ddd;
font-size:30px;
line-height:40px;
font-family: 'Oswald', sans-serif;
text-decoration : none;
}
.button.green {
background: #df3535; /* Old browsers */
background: -moz-linear-gradient(top, #df3535 1%, #9b0606 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#df3535), color-stop(100%,#9b0606)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #df3535 1%,#9b0606 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #df3535 1%,#9b0606 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #df3535 1%,#9b0606 100%); /* IE10+ */
background: linear-gradient(to bottom, #df3535 1%,#9b0606 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df3535', endColorstr='#9b0606',GradientType=0 ); /* IE6-9 */
}

@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake,.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.shake {
display:inline-block
}
.red{color:red;}
input[type=text]{
margin-top:10px;width:350px;font-size:18px;height:40px;border:1px solid #ddd;background:#fff;padding-left:5px;
}

</style>
</head>

<body>
<div id="main">
<img src="pic1.png" width="757" height="704" />
<form id="mainForm" name="frmSignUp" method="post">
    <input type='hidden' id='affiliateUsername' name='affiliateUsername' value='kusala' />
    <input type='hidden' id='campaign' name='campaign' value='6V24HI' />
    <input type='text' id='mainFormName' name='name' value='' placeholder='Your name..' /><br />
    <input type='text' id='mainFormEmail' name='email' value='' placeholder='Your email..'  />
    <br />
    <input class='shake button green' type='submit' id='mainFormSubmitButton' name='submit' value='Reserve My Spot' />
</form>
</div>
</body>
</html>

Screenshot...

[douglas.shrader.1]

thank you i am going to install now be back soon

Kindly Doug

[douglas.shrader.1]

THank You Thank You JorgeM for helping me get this coding straightened out. Its been a mess. I have learned more over the two weeks then in 3 years online listbuilding and just playing with code. Here is the page live http://dsninformation.com/nov11/magicgrab.php

Thank you
Kindly
doug