We Rock Your Web Forum » Markup Languages » HTML

Webpage scale background image to fill page?

(4 posts)

GrafixFilter

member
Joined: Nov '09
Posts: 13
Reputation:21

Is there a good (and browser compatible) way to expand (scale) a background image to fill a page at all times, regardless of monitor size (resolution)? I ask because I would like to update on of my website background images from a gradient/ solid color to a photo image (it's optimized so shouldn't take up too much space).

However, the way I have it setup right now (simply using CSS: #id { background: url(example.jpg) }

I can't get it to scale up for larger monitors, or shrink down on smaller screens.

Any ideas?

Posted 1 year ago #
Posted 1 year ago
cwd

senior admin
Joined: Jul '09
Posts: 225
Reputation:244
The most browser compatible method we're aware of is to use CSS to scale an actual image. You'll need to position block elements of your page accordingly (using relative positioning), so they don't get covered by the background image.

Here's the basic approach:

CSS
```
img#background { min-height: 100%; min-width: 800px; width: 100%; height: auto; position: fixed; top: 0; left: 0 }
@media screen and (max-width: 800px) { img#background { left: 50%; margin-left: -400px; }}
```
HTML
```
<html>
<body>
<img src="example.jpg" id="background" alt="Background Image for Web page" />
</body>
</html>
```
Adjust the image width (800px) to fit the width of your image (ie. you may use 1024px or higher for better quality at larger resolutions)). And don't forget to adjust the last "left-margin" attribute to equal half your image width (400px in the example).
Posted 1 year ago #
Anonymous
Once CSS 3 is widely adopted by browsers (currently CSS 2 is most common), you'll be able to use simple CSS statements to scale your website background to fill the screen of your user using the cover attribute:
```
html { background: url(example.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
```
Posted 1 year ago #
Anonymous

[list][/list][list=1]

Posted 11 months ago #