stretching a background image in HTML
- Started
- Last post
- 19 Responses
- ukit
Is there any good way to do this? Not a gimmick or a hack, but something that could be reused across a site without bastardizing the code too much.
- detritus0
not that I'm a comprehensive source of knowledge on the subject, but 'i don't think so'. If I were attempting this, I'd probably try it with a skewed image, residing on a low z-level div.
- detritus0
or, select from a variety of backgrounds, depending on what a script told the code was the viewing resolution.
- ukit0
Right - those were the two options I was considering. Maybe the second one is cleaner, although less flexible.
- detritus0
Aye, that's a point - use tables.
o_O
- > http://www.qbn.com/t…detritus
- or use CSS to center it veritcally, sheesh.zarkonite
- nerrdboy0
is that what you were looking for?
- era4O40
yup, you can use JS document.getElementById('[the image]').width = x;
- era4O40
where X can be screen.width, window.width, whatever.
- detritus0
Of course, there's always...
http://www.qbn.com/topics/597284…
- utopian0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scaled background-image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Copyright (C) Mark Schenk, 2003-2006" />
<style type="text/css">
/* some changes made dd 1-12-2005, after discussion with Bill Brown
- removed absolute positioning on the content; makes demo more useful
+ added 1px top-border on body and positioned it -1px upwards, to prevent margin-collapsing
+ explicitly added z-index:0 to body for Mozilla
*//* styles for background-image */
html { height: 100%; overflow:hidden;}
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: white; }#content { font-family: Tahoma, Arial, sans-serif; font-size: 12px; margin-top: 30%; margin-left: 10%; padding: 10px; width: 40%; height: 20%; overflow: auto; background-image: url(images/transparent.png); }
h1 { color: maroon; font-size: 14px; }
</style>
</head>
<body id="www-markschenk-com">
<img id="background" src="images/Amelie_groot.jpg" alt="Background-image" />
<div id="content">
<h1>Scaling background image</h1>
<p>Always wanted to have a background image that scaled to your window size? Well, it is possible with some CSS trickery.</p>
<p>The background-image you see here is absolute-positioned to the body and it scales to the width and height of the page. This also means that the image is slightly distored when using a different screen ratio.</p>
<p>A problem with absolute positioning the image is, that if there is so much text that a vertical scrollbar is needed, the image will scroll with the canvas. This can easily be circumvented by using position:fixed on the image, but this doesn't work in IE6 but only in Opera.</p>
</div>
<!-- original experiment date: December 23, 2003 -->
</body>
</html>
- designbot0
you have to get creative with the backgrounds, they can be pretty huge dimensionally and you can still have a small file size if you work at it.
If the backdrop itself is not seamless (which obviously it's not) you can work a liberal fade and a solid color background so the transition is seamless.
There are ways, just gotta be creative. Maybe choose a new backdrop if yours looks like hell.
- ********0
This may help.
http://www.buildinternet.com/pro…
- neverblink0
I don't really like that supersized script.. it seems to have more bugs than my own version: (images wern't optimized for web, so prepare for some loading-time) http://www.neverblink.net/test/k…
- ********0
yes:
<table width="100%" height="100%">...</table>
and there you go
- thatboyneave0
You can't resize a background image directly (correct me if I'm wrong). It has to be an <img /> tag.
But, if you want to keep your markup clean it's possible to define the bg image in CSS, and stretch it with jQuery:
1. use css() to find out the url of the background image
2. create an image element with the same source as the background image
3. remove the background image
4. make function that stretches the image to fit the window whenever the window is resizedHere it is in effect: http://www.alexandraowen.co.nz/
- Stugoo0
sorry without reading the above and nursing a hangover.
surley you could do a
<div id="imageStretch"><img src="path/to/image.jpg" /></div>with
#imageStretch img { width:100%;} ?
not sure about how that would work with bg images.