CODEWITHSUNDEEP
jquerycss
TD540
TD540

Reputation: 1760

Auto width div background + vertical scroll

Picture a site with a banner of varying height at the top of a page,

Below that, div#wrapper-inside inside div#wrapper
#wrapper-inside is of fixed width and centered
#wrapper has a big background-image

Now. When the browser viewport width is smaller than our #wrapper-inside, we get a nice horizontal scrollbar, and when we scroll to the left, you'll notice that #wrapper's width stays the same as the browser viewport width.

The problem is that #wrapper scrolls along and the background-image gets cut off.

Can this be fixed with css alone, if not, jQuery?

Upvotes: 0

Views: 1281

Answers (2)

Robert Cabri
Robert Cabri

Reputation: 3991

it can be done with only css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #wrapper {
                overflow: auto;
                background-image: url('http://fc05.deviantart.net/fs50/f/2009/340/b/0/Me_by_dicabrio.png');
            }
        </style>
    </head>
    <body>
        <div id="header">
            bla bla
        </div>
        <div id="wrapper">
            <div id="wrapper-inner" style="width: 2000px; border: 1px solid black;height: 100px; color: white;">
test;test;test;test;test;test;test;test;test;test;test;test;test;test;test;
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Tim Ebenezer
Tim Ebenezer

Reputation: 2724

What about setting #wrapper min-width to the same fixed width as the wrapper-inside.

Upvotes: 1

Related Questions