Sizing Page Backgrounds

P

PJB

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
 
E

Els

PJB said:
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 ;-)
 
D

David Dorward

PJB said:
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.
 
P

Peterken

PJB said:
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
 
P

Peterken

Toby Inkster said:
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


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);
}
//-->
 
J

Jonathan N. Little

PJB said:
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>
 
T

Toby Inkster

Peterken said:
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.
 
P

Peterken

Toby Inkster said:
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.

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.
 
T

Toby Inkster

Peterken said:
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.
 
P

PJB

Thanks you for all the suggestions.

I successfully applied Jonathan's suggestion to my Index page
(see www.pjbird.com). The picture re-sizes nicely at different resolutions
and aspect ratios and does not loose quality. Thanks for that!

Inevitably, page elements will appear in different locations depending on
the resolution and aspect ratio. This is to be expected and I will have to
play around a bit.

PJB
 
D

David Dorward

P

Peterken

Toby Inkster said:
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.

as is 800*600 no exact multiple of 640*480
as is 1024*768 no exact multiple of 800*600 or 640*480
as is 1280*1024 no exact multiple of 1024*768 or 800*600 or 640*480

It *never* is, neither are the aspect ratios, so I still remain with using
the highest image fore not stretching beyond representativity.....
And it's not such a big file, a jpg of 1600*1200 may well be below 50k when
selecting a bit
 
P

Peterken

Jonathan N. Little said:
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>
PJB said:
Thanks you for all the suggestions.

I successfully applied Jonathan's suggestion to my Index page
(see www.pjbird.com). The picture re-sizes nicely at different resolutions
and aspect ratios and does not loose quality. Thanks for that!

Inevitably, page elements will appear in different locations depending on
the resolution and aspect ratio. This is to be expected and I will have to
play around a bit.

PJB

Nice layout, text neatly over image, counter visible, all readable.
Nevertheless the image is also distorting when resizing width, just like the
scripts do, be it non-disturbing due to content.
 
P

Peterken

Jonathan N. Little said:
<snip>

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>
PJB said:
Thanks you for all the suggestions.

I successfully applied Jonathan's suggestion to my Index page
(see www.pjbird.com). The picture re-sizes nicely at different resolutions
and aspect ratios and does not loose quality. Thanks for that!

Inevitably, page elements will appear in different locations depending on
the resolution and aspect ratio. This is to be expected and I will have to
play around a bit.

PJB


Nice trick, but what if PJB's pages' contents is alot larger then the
background image ?

In other words:
Is it possible using Jonathans CSS to have a "pseudo-fixed" background image
(and
resized in the way PJB wanted)
AND
having the body scroll over it, thus a simulation of retaining the image
ever in the viewport ?
(ok, I admit, maybe a bit of a silly question, but I'm rather new to CSS so
forgive me....)
 
J

Jonathan N. Little

PJB said:
Thanks you for all the suggestions.

I successfully applied Jonathan's suggestion to my Index page
(see www.pjbird.com). The picture re-sizes nicely at different resolutions
and aspect ratios and does not loose quality. Thanks for that!

Inevitably, page elements will appear in different locations depending on
the resolution and aspect ratio. This is to be expected and I will have to
play around a bit.
<snip>

(Whew finally got my news server back!) Your page has problems because
of some of your code, I answered this in the Mozilla NG.

Anyway, it is not working properly because you are messing up the CSS
with some HTML.

1) if you do not want the dragonfly to distort remove the HTML 'width'
and 'height' attributes on the image, let the CSS set the only the width
to 100% can the height will scale accordingly.
2) you might want to set your BODY background-color to something dark or
black so that with narrow windows the area not covered by your image
will be dark and your text readable.
3) dump all the old '<body link="#FF9900" vlink="#0099FF">' and use the
CSS for this....
 
P

PJB

"Jonathan N. Little" wrote in message
<snip>
Anyway, it is not working properly because you are messing up the CSS with
some HTML.

1) if you do not want the dragonfly to distort remove the HTML 'width' and
'height' attributes on the image, let the CSS set the only the width to
100% can the height will scale accordingly.
2) you might want to set your BODY background-color to something dark or
black so that with narrow windows the area not covered by your image will
be dark and your text readable.
3) dump all the old '<body link="#FF9900" vlink="#0099FF">' and use the
CSS for this....

Ok, bear with me... The CSS you suggested (Dec. 11) had two height settings
within the CSS. I deleted the first but I am not sure about the last line:
#content {height: 100%}
Can I delete this also?

The damsel fly image scales OK but it pixalates a bit on wider screens. This
I can live with. Otherwise, I have been trying different approaches on the
other pages -- re-sizing / rescaling / resampling the background image files
etc. Ideally, where I have lots of text I would like the background image to
remain fixed with all text scrolling in front. Pictures blending into the
background colour will work. Eventually,I'll have all pages using CSSs. I
just
have to learn that and PhotoShop!

PJB
 
J

Jonathan N. Little

PJB wrote:
Ok, bear with me... The CSS you suggested (Dec. 11) had two height settings
within the CSS. I deleted the first but I am not sure about the last line:
#content {height: 100%}
Can I delete this also?
The purpose is to expand height of content div to match body element in
case you a wanted to position or size and child elements relative to the
page. if you have not such need then it could be deleted.
The damsel fly image scales OK but it pixalates a bit on wider screens. This
I can live with. Otherwise, I have been trying different approaches on the
other pages -- re-sizing / rescaling / resampling the background image files
etc. Ideally, where I have lots of text I would like the background image to
remain fixed with all text scrolling in front. Pictures blending into the
background colour will work. Eventually,I'll have all pages using CSSs. I
just
have to learn that and PhotoShop!

Some browsers a better than others but all are inferior to a image
resampled and optimized with image editor software. It will alway be a
compromise of file size/quality
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top