Question

I am having a problem in bringing the background image of my <p> tag into the center of 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>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </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>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </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>&nbsp;&nbsp;
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </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>&nbsp;&nbsp
            <a href="#aboutUs">About Us</a>&nbsp;&nbsp;
            <a href="#contactUs">Contact Us</a>&nbsp;&nbsp;
            <a href="#products">Products</a>&nbsp;&nbsp;
        </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>

Fiddle

Answer 1

If you have an image element inside a paragraph, you need to position the images in a way that doesn’t effect the paragraphs content:
p img{
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
float: left;
}

In order to absolutely position the image, the container has to be relatively positioned using position: relative. Here’s an example:
p{
height: 180px;
width: 40%;
position: relative;
border: 1px solid red;
}

Finally, the markup:

<p> 
    <img src="http://placekitten.com/150/150" alt="nice kitten" />
</p>

However, a better approach would be to display the image using css: background: url(http://placekitten.com/150/150) no-repeat center center;. Thus the markup will be much simpler:

<div id="logo"></div>

The CSS for the div:
#logo{
background: url(http://placekitten.com/150/150) no-repeat center center;
height: 180px;
width: 40%;
border: 1px solid blue;
}

…or on http://jsfiddle.net/Er2Tw/