Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Sizing Page Backgrounds

Reply
Thread Tools

Sizing Page Backgrounds

 
 
PJB
Guest
Posts: n/a
 
      12-11-2005
Is there a way to define the size of a page's background image
so it spans 100% of any screen? Depending upon the computer
and screen resolution, my background images do not always fill
the screen. My default design resolution has been 800 X 600 but
on a wide-screen laptop at a higher resolution, this looks like a
design error (see www.pjbird.com). Currently, I set my text formatting
to span only 800 pixels but would like the background image to fill
the page.

Should I reformat my images to a larger dimension?
Is there an HTML command to set the image width to span 100% of
the screen (like a table option)?
Should I use a layer tag or other option?

My use and knowledge of HTML is limited so any insights would help.
Note the following tag (I am not using CSS but have during various design
phases):

<body text="#ff9900" link="#FF9900" vlink="#0099FF" Style=
"margin-top:20px; margin-left:20px; background-image:url('Damsel_fly.JPG');
background-repeat: no-repeat">

PJB



 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      12-11-2005
PJB wrote:

> Is there a way to define the size of a page's background image
> so it spans 100% of any screen? Depending upon the computer
> and screen resolution, my background images do not always fill
> the screen. My default design resolution has been 800 X 600 but
> on a wide-screen laptop at a higher resolution, this looks like a
> design error


That's because it *is* a design error

> (see www.pjbird.com). Currently, I set my text formatting
> to span only 800 pixels but would like the background image to fill
> the page.


Just get an image that is very large, looks good in full and looks
good when cut around the sides, and center it.

> Should I reformat my images to a larger dimension?
> Is there an HTML command to set the image width to span 100% of
> the screen (like a table option)?


Not for background images.

> Should I use a layer tag or other option?


You could of course use an image in the HTML instead of it being a
background image, which opens up some scaling options. I doubt your
background image will look good when stretched 150% horizontally and
70% vertically for instance.

> My use and knowledge of HTML is limited so any insights would help.
> Note the following tag (I am not using CSS but have during various design
> phases):
>
> <body text="#ff9900" link="#FF9900" vlink="#0099FF" Style=
> "margin-top:20px; margin-left:20px; background-image:url('Damsel_fly.JPG');
> background-repeat: no-repeat">


Having used CSS during various design phases is no excuse for ending
up with using text, link and vlink attributes in a body element

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      12-11-2005
PJB wrote:

> Is there a way to define the size of a page's background image
> so it spans 100% of any screen?


No. You can fake it with a foreground image with content layered over it
using absolute positioning, but that's a bad idea (from the semantic point
of view, but also from the problems you can if CSS is turned off or
unavailable, and that bitmaps don't scale all that well anyway).

Having backgrounds that can tile (at least in part, a tiling section in the
middle can have non-tiling selections on each side of it) or that fade to a
plain background colour is generally a good idea.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
Peterken
Guest
Posts: n/a
 
      12-11-2005

"PJB" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Is there a way to define the size of a page's background image
> so it spans 100% of any screen? Depending upon the computer
> and screen resolution, my background images do not always fill
> the screen. My default design resolution has been 800 X 600 but
> on a wide-screen laptop at a higher resolution, this looks like a
> design error (see www.pjbird.com). Currently, I set my text formatting
> to span only 800 pixels but would like the background image to fill
> the page.
>
> Should I reformat my images to a larger dimension?
> Is there an HTML command to set the image width to span 100% of
> the screen (like a table option)?
> Should I use a layer tag or other option?
>
> My use and knowledge of HTML is limited so any insights would help.
> Note the following tag (I am not using CSS but have during various design
> phases):
>
> <body text="#ff9900" link="#FF9900" vlink="#0099FF" Style=
> "margin-top:20px; margin-left:20px;
> background-image:url('Damsel_fly.JPG');
> background-repeat: no-repeat">
>
> PJB
>


only way I know of is using JS....
but then users with JS disabled don't have the advantage

several can be found just googling for it



 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      12-11-2005
PJB wrote:

> Is there a way to define the size of a page's background image
> so it spans 100% of any screen?


Not really. There will be in CSS 3, but that's still a long way off.

It's possible to fake it with a little scripting though:
http://examples.tobyinkster.co.uk/grad/grad

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Peterken
Guest
Posts: n/a
 
      12-11-2005

"Toby Inkster" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)5n.co.uk...
> PJB wrote:
>
>> Is there a way to define the size of a page's background image
>> so it spans 100% of any screen?

>
> Not really. There will be in CSS 3, but that's still a long way off.
>
> It's possible to fake it with a little scripting though:
> http://examples.tobyinkster.co.uk/grad/grad
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact



There's another one going around, resizign and even creating form of "fixed"
background and working in IE and netscape (dunno for others):

Documented in the code below, a script is included in the <head> section
using
<!--including javascript for resize -->
<script language="JavaScript" type="text/javascript"
src="./scripts/backgrdresize_move.js"></script>



The actual script in the backgrdresize_move.js file

<!--
/* //------------------------------------------------------------
// Background Image WITH moving/resizing background
// Document Image resize
//-------------------------------------------------------------*/

/******** explanation
MUST create a layer with name "BGimglayer" between the <body> and </body>
tags AND set an onload="ImageOffset()"
MUST have the ID of the image to be "imageBG", is done in same part below

Example of layer code for body:

<body onload="ImageOffset()" background="./deep.jpg">

<!-- the part used for moving/resizing image background, somewhere in the
body section -->
<div style="position: absolute; width: 848px; height: 577px; z-index: -1;
left: 1px; top: 0px" id="BGimglayer">
<script type="text/javascript">
document.write('<img border="0" src=' + document.body.background + '
width="' + winWid + '" height="' + winHgt + '"' + 'id="imageBG">');
</script>
</div>
(-----rest of the page here------)
</body>
********* end explanation */

// vars holding window size
var winWid;
var winHgt;

function ImageOffset()
{

// check iexplore or netscape for image size
winWid = document.all ? document.body.clientWidth : innerWidth;
winHgt = document.all ? document.body.clientHeight : innerHeight;

// reducing a bit to avoid 'jumping' image
winWid = winWid - 3;
winHgt = winHgt - 3;

// move layer
if(document.all) // iexplore
{
document.all['BGimglayer'].style.posLeft = document.body.scrollLeft;
document.all['BGimglayer'].style.posTop = document.body.scrollTop;
}
else if(document.layers) // netscape
{
document.layers['BGimglayer'].pageX = window.pageXOffset;
document.layers['BGimglayer'].pageY = window.pageYOffset;
}

// resize layer
BGimglayer.width = winWid ;
BGimglayer.height = winHgt ;
// resize image
document.getElementById("imageBG").width=winWid;
document.getElementById("imageBG").height=winHgt;

window.onresize = ImageOffset;

setTimeout('ImageOffset()',100);
}
//-->


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-11-2005
PJB wrote:
> Is there a way to define the size of a page's background image
> so it spans 100% of any screen? Depending upon the computer
> and screen resolution, my background images do not always fill
> the screen. My default design resolution has been 800 X 600 but
> on a wide-screen laptop at a higher resolution, this looks like a
> design error (see www.pjbird.com). Currently, I set my text formatting
> to span only 800 pixels but would like the background image to fill
> the page.
>
> Should I reformat my images to a larger dimension?
> Is there an HTML command to set the image width to span 100% of
> the screen (like a table option)?
> Should I use a layer tag or other option?
>
> My use and knowledge of HTML is limited so any insights would help.
> Note the following tag (I am not using CSS but have during various design
> phases):
>
> <body text="#ff9900" link="#FF9900" vlink="#0099FF" Style=
> "margin-top:20px; margin-left:20px; background-image:url('Damsel_fly.JPG');
> background-repeat: no-repeat">


Another way to fake it with CSS, here assuming background image very dark

<style type="text/css">
HTML, BODY {
width: 100% height: 100%; color: white; background-color: black; }
/* bg image only specify width so it will not distort when scaling */
#bg, #content { position: absolute; width: 100%; }
#content {height: 100% }
</style>


<body>
<img id="bg" src="YourBackgroundImage.jpg" alt="">
<div id="content">
<p>Put your page content here...</p>
</div>
</body>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      12-12-2005
Peterken wrote:

> There's another one going around, resizign and even creating form of "fixed"
> background and working in IE and netscape (dunno for others):


You will notice though that the background appears nasty and pixelated.
This is because, mostly for speed puposes, browsers do a really bad job of
resizing images. (Except Opera, which only does a slightly bad job.)

If you want nice smooth curves and flowing lines, your image will have to
be resized *before* the browser sees it.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Peterken
Guest
Posts: n/a
 
      12-12-2005

"Toby Inkster" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)5n.co.uk...
> Peterken wrote:
>
>> There's another one going around, resizign and even creating form of
>> "fixed"
>> background and working in IE and netscape (dunno for others):

>
> You will notice though that the background appears nasty and pixelated.
> This is because, mostly for speed puposes, browsers do a really bad job of
> resizing images. (Except Opera, which only does a slightly bad job.)
>
> If you want nice smooth curves and flowing lines, your image will have to
> be resized *before* the browser sees it.
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact
>


Think that depends on the choice of the original image of course:
I've been using 1600*1200*32 images, and am using 1600*1200*32 screen
setting myself, looks fine in that and in smaller for IE and netscape
I can imagine though that when using 640*400 (or smaller) images to be
stretched and displayed on a 1600*1200 screen it looks just awfull.
My idea : When using a "dynamically stretched image" use one for the highest
expected screen resolution, the lower resolutions won't get worse then.



 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      12-12-2005
Peterken wrote:

> My idea : When using a "dynamically stretched image" use one for the highest
> expected screen resolution, the lower resolutions won't get worse then.


They will get worse.

e.g. 1600x1200 isn't an exact multiple of 1280x1024 -- they're even at
different aspect ratios, so your 1600x1200 image will look crap. It will
also be a huge download.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Backgrounds Lukasz Glaz ASP .Net 0 03-27-2006 01:51 PM
Problem with backgrounds &colors balado Firefox 1 02-28-2005 09:04 PM
Backgrounds too small in Outlook =?Utf-8?B?R2FtYmxl?= Microsoft Certification 0 04-04-2004 09:01 PM
Configuration setting to print backgrounds? Gwen Morse Firefox 2 02-03-2004 08:32 PM
Hijacking Hibernate and restore backgrounds Mark ASP .Net 0 09-29-2003 05:21 AM



Advertisments