Auto-Resizing Background Images for Drupal Themes and Websites with CSS
A CSS Solution to Make a Background Image Automatically Fill an Entire Browser Window Without Using Javascript
Currently, the enhancements of CSS 3 are of no use since the most popular web browsers have not yet been upgraded to be compatible. A number of enhancements in the CSS 3 protocol relate to backgrounds and borders, and more specifically it provides more options on using images with borders and backgrounds.
In the meantime, while most oft-used browsers are still focused on CSS 2, there is still a way to make a background image for a website fill the entire browser window without using Javascript. This is not a recommendation to design a website this way because it can cause the site to load slowly (depending on the size of the image). But for those who do want one image to fill the entire background of a website without having the image cut off or not fill the entire window, there is a way to do this with CSS 2. Using CSS, one can have a background image automatically re-size itself depending on the size of the viewer's browser window.
This can be done for Drupal Themes; templates and themes for other platforms; and "plain" HTML websites. Below is one example of doing this for a Drupal theme. The specific div classes and IDs are not important - name them whatever works for you. In this example, we are placing wrapping a couple of extra Divs around the rest of the components in the Page TPL file.
<body>
<img id="bg-img" class="bg" src="/sites/all/themes/NameofTheme/ImageFolder/Image.png" alt="" />
<div id="site-container">
<div id="site-wrapper">
And add the closing Div tags at the end below all of the elements you have in your Page TPL. If you're not working with a Drupal theme, you would simply be adding this to an HTML or corresponding PHP file corresponding to the theme or template for whichever platform you are using.
.
And then for this example, you can include the following along in your CSS - the example below doesn't necessarily include everything that may wish to have included. The CSS examples below are just in order to make this one feature work.
body {
width: 100%;
height: 100%;
overflow: hidden;
}.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5000;
}#site-container {
z-index: 6000;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
}#site-wrapper {width: 900px; margin: 0 auto;}
Post new comment