CODEWITHSUNDEEP
htmlcss
Mario Stoilov
Mario Stoilov

Reputation: 3447

absolute centered div not overflowing correctly

Take a look a this sample HTML (a dumbed-down version of my project):

<!DOCTYPE html>
<html>
    <head>
        <style>
            .pagewrapper {
                width: 960px;
                height: 768px;
                margin: auto;
                border: 1px solid green;
                border-radius: 3px 3px 3px 3px;
                box-shadow: 2px 2px 2px 2px rgb(0, 153, 51);
            }
            .pagewrapperImg {
                background: url("http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg");
                background-size: 100% 100%;
            }
            </style>
    </head>
    <body style="overflow: scroll;">
        <div style="right: 0px; bottom: 0px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;">
            <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                <div class="pagewrapper pagewrapperImg" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                </div>
            </div>
        </div>
    </body>
</html>

This is suppose to produce a centered div with a background image. When the window is resized, it should overflow with scrollbars. This works fine on Firefox, but on IE and chrome, it clips the top of the div, as shown in the image.

enter image description here

Why is this happening, and how can I fix this?

EDIT: Let me point out that in the full project, there are UI elements in this div, and they get clipped too (it's not just the image)

Upvotes: 0

Views: 37

Answers (1)

NoobEditor
NoobEditor

Reputation: 15881

in .pagewrapperImg add

background-position:center center;

and please please please....dont use inline styles!!

fiddle demo

Upvotes: 1

Related Questions