CODEWITHSUNDEEP
css
newday
newday

Reputation: 3878

Image is not centered

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?

Upvotes: 0

Views: 123

Answers (3)

naresh kumar
naresh kumar

Reputation: 2241

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;
}

Upvotes: 1

Giacomo1968
Giacomo1968

Reputation: 26066

The problem is you are mixing a width: 100% with the centering trick of doing margin-left: auto; and margin-right: auto; which won't work since if the width is 100% then the margins will be automatically nothing since the box fills the space. So I reworked the CSS so it has a fixed width. I also added a color to the box since we don’t have an image to look at for reference but need to see the box. I also moved the inline style for #footer into the CSS since it was weird to see that empty #footer { } in the CSS. Here is a full HTML example of how it should work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>CSS Centering Fixed</title>
    <style type="text/css">
        /*<![CDATA[*/
        #footer
        {
            height: 200px;
        }

        #middle-footer
        {
        display: block;
            background-image: url('img/footer-bg.gif');
            background-repeat: no-repeat;
            background-color: #ffffcc;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            height: inherit;
            overflow: hidden;
        }

        /*]]>*/
</style>
</head>

<body>
    <div id="footer">
        <div id="middle-footer"></div>
    </div>
</body>
</html>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Resizing the background in CSS is possible only with modern browsers. So, if you would like to do, add this:

background-size: 90%;

The full CSS is:

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

Upvotes: 0

Related Questions