Search code examples
background-imagecentercss

CSS - body background center ignore min-width

This site has a "min-width:600px" in BODY, and uses a backgroundImage in Center.

When I resize and It gets lower than 600px, it creates the scroll-bar, fine. But the background dont stop to center it.. The background ignore the min-width.

My example here: http://jsfiddle.net/XD4QM/

<html>
    <body>
        <div>
            background ignores the min-width

        </div>
    </body>
</html>



body{
    min-width:600px;
    background:url(http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg) center top;

}

Aditional information:

I have a pretty big and bad website to fix.. So like the first move I would like to do this.. This site looks horrible when the person has less than 1024px width (600 was just an example). So I Prefer have the horizontal-scroll and let the site with min-width:1024px and do not destroy the site. Just to keep the client happy until I remake and fix everything.

Solution

  • Well, I wouldn't go with any of the above approaches but change the code to following

    background:url("http://mrknobbymusic.com/wp-content/uploads/2011/08/example-last-ones-standing.jpg") repeat scroll center top / cover transparent;

    notice top / cover. cover makes sure that background always resizes along with the div and background is set as cover of the book in this case as you resize a book, cover resizes itself