I need help centering the background image of my <p> tag on the webpage.
Script
$(function() {
$('ul.nav a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000, "easeInOutExpo");
event.preventDefault();
});
// $("#logo") = my <p> tag containg the background image
var imgTop = ($(window).height() - $("#logo").css("height")) / 2;
var imgLeft = ($(window).width() - $("#logo").css("width")) / 2;
$("#logo").css({
"top": imgTop,
"left": imgLeft
});
setInterval(function() {
$("#logo").fadeTo(2000, 0.7).fadeTo(2000, 1);
}, 0);
});
CSS
*{
margin:0;
padding:0;
}
body{
background: #100061;
font-family:Georgia;
/*font-size: 34px;*/
letter-spacing:-1px;
width:16000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
overflow: hidden;
height: 100%;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
}
.section h2{
margin:50px 0px 30px 50px;
}
.section p{
margin:20px 0px 0px 50px;
width:600px;
}
.section ul{
list-style:none;
margin:20px 0px 0px 300px;
}
#logo{
width: 500px;
height: 194px;
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="section black" id="home">
<img src="images/logo.png" id="logo" />
<ul class="nav">
<li>
<a href="#home">Home</a>
<a href="#aboutUs">About Us</a>
<a href="#contactUs">Contact Us</a>
<a href="#products">Products</a>
</li>
</ul>
</div>
<div class="section white" id="aboutUs">
<h2>About Us</h2>
<p>
‘A fathomless and boundless deep,
There we wander, there we weep;
On the hungry craving wind
My Spectre follows thee behind.
</p>
<ul class="nav">
<li>
<a href="#home">Home</a>
<a href="#aboutUs">About Us</a>
<a href="#contactUs">Contact Us</a>
<a href="#products">Products</a>
</li>
</ul>
</div>
<div class="section black" id="contactUs">
<h2>Contact Us</h2>
<p>
‘He scents thy footsteps in the snow
Wheresoever thou dost go,
Thro’ the wintry hail and rain.
When wilt thou return again?
</p>
<ul class="nav">
<li>
<a href="#home">Home</a>
<a href="#aboutUs">About Us</a>
<a href="#contactUs">Contact Us</a>
<a href="#products">Products</a>
</li>
</ul>
</div>
<div class="section white" id="products">
<h2>Products</h2>
<p>
‘He scents thy footsteps in the snow
Wheresoever thou dost go,
Thro’ the wintry hail and rain.
When wilt thou return again?
</p>
<ul class="nav">
<li>
<a href="#home">Home</a>  
<a href="#aboutUs">About Us</a>
<a href="#contactUs">Contact Us</a>
<a href="#products">Products</a>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>