Menu
On this page, I have a 2-tone background. The structure of the page is:
<body>
<div id="upbg"/>
<div id="container"/>
</body
This background is achieved by adding a dark background image to upbg and a lighter background image on the body. The css for upbg is:
#upbg {
background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0;
height: 275px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
If you make the browser window very narrow such that scrollbars appear, then if you scroll across to the right you'll notice that the background image of upbg doesn't fill the entire width of the page.
My guess is that this is because 'width: 100%' means the width of the browser window, rather than the entire width of the page, is there a way to fix this?
Thanks, Don
254
My guess is that this is because 'width: 100%' means the width of the browser window, rather than the entire width of the page, is there a way to fix this?
100% means it'll be as wide as the parent element it is positioned relative to (in this case, body, the width of which will be based on the width of its parent, html). Which will be as wide as the browser window, unless you specify otherwise.
The problem is, you have another child of body which can be wider than body: both #container and #footer are styled such that they will always be at least 1026px wide. This does not widen their parent elements, as we've already established that those will be as wide as the browser window; instead, they overflow their parents. The default response to this is to display scrollbars so that you can scroll and view the overflowing content; if you added the style overflow:hidden to html or body, you'd find your content and footer clipped to the size of the browser window, and no scrollbars displayed.
There are a couple of easy solutions to this:
position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; This accomplishes two things: you're no longer specifying a width for #upbg, thus allowing it to become wide enough to enclose its new children, and it allows you to get rid of a lot of now-unnecessary styling (you'll want to clear out the padding you've set for body as well, along with some style on #content). Alternately,#content and #footer, so they don't overflow.
88
simply you can use a absolute positioned image with both width & height set to 100% wrapped with the body tagk, if you could use a whole background. set the z-index of other elements higher than the background considered image.
<head>
...
<style>
.virtualBg{
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<img src="path/to/bg.jpg" class="virtualBg" />
...
</body>
but I recommend to use a vertically cropped image which contains both color tones and then repeat-x the background for the body element.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
