Question

In my footer area I have set a background image. Problem is it is not centered. Only the some part of image is shown. Right end of the image is hidden. If I crop the image, I can handle this. But I want to handle it from css.

Here is the code

#footer{

}

#middle-footer{
    background-image:url('img/footer-bg.gif');
    background-repeat:no-repeat;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    height:inherit;
    overflow:hidden;
}

<div id="footer" style="height:200px;">
    <div id="middle-footer" >
    </div>
 </div>

How to do this?

Answer 1

Ok, try this. Instead of using background-image: use the short-hand and after the URL use top center. Code will be:

#footer {
    background: url('img url') top center;
}