Geek Answers Handbook

Background image does not stretch full page width

In this page , I have a 2-tone background. Page structure:

<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. Css for upbg:

 #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 so that scrollbars appear, when scrolling to the right you will notice that the background image upbg does not fill the entire width of the page.

I assume this is because “width: 100%” means the width of the browser window, not the entire width of the page, is there any way to fix this?

Thanks Don

+6
html css
source share
2 answers

I guess this is because 'width: 100%' means browser width, not page width, is there any way to fix this?

100% means that it will be as wide as the parent element, which it is located relatively (in this case, the body , the width of which will be based on the width of its parent element, html ). Which will be as wide as the browser window, unless you specify otherwise.

The problem is that you have another child body element that can be wider than body : both #container and #footer have a style that will always have a width of at least 1026px . This does not extend their parent elements, as we have already established that they will be as wide as the browser window; instead, they overwhelm their parents. The default answer to this is to display scrollbars so that you can scroll and view overflowing content; if you add the overflow:hidden style in html or body , you will find that your content and footer are cropped to the size of the browser window and no scroll bars are displayed.

There are some simple solutions:

  • Wrap #content and #footer in #upbg instead of preceding them. Then delete the existing styles and create it as follows: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; This does two things: you no longer specify the width for #upbg, which allows it to become wide enough to accommodate its new children, and this allows you to get rid of a lot of unnecessary style (you will want to clear the indents that you set for the body , as well some style on #content ). On the other hand,
  • Get #content of the minimum width on #content and #footer so that they do not overflow.
+8
source share

it’s just that you can use an absolute positioned image with a width and height set to 100% wrapped with the body tag if you could use the whole background. set the z-index of other elements above the background 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>
<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 using a vertically cropped image containing both color tones and then repeating the -x background for the body element.

+1
source share

More articles:


All Articles